解决nginx/apache静态资源跨域访问问题详解
1. apache静态资源跨域访问
找到apache配置文件httpd.conf
找到这行
#LoadModule headers_module modules/mod_headers.so
把#注释符去掉
LoadModule headers_module modules/mod_headers.so
目的是开启apache头信息自定义模块
在独立主机配置文件中新增header
Header set Access-Control-Allow-Origin *
例如:
<VirtualHost *:88> ServerAdmin admin@example.com DocumentRoot "****************" ServerName www.jb51.com Header set Access-Control-Allow-Origin * ErrorLog "***********" CustomLog "****************************" common <Directory "**************"> SetOutputFilter DEFLATE Options FollowSymLinks ExecCGI Require all granted AllowOverride All Order allow,deny Allow from all DirectoryIndex index.html index.php </Directory> </VirtualHost> ApacheCopy
意思是对这个域名的资源进行访问时,添加一个头信息
重启apache
service httpd restart
2. nginx静态资源允许跨域访问
同理 找到相应域名配置文件
在server模块中添加配置:
add_header ‘Access-Control-Allow-Origin' ‘*';
例:
server { listen 80; add_header 'Access-Control-Allow-Origin' '*'; location /Roboto/ { root /home/images; autoindex on; } }
nginx重载
./nginx -s reload
通过以上方法配置完后,再次跨域访问静态资源就没有问题了
以上既是nginx/apache静态资源允许跨域访问解决方法
相关推荐
-
如何用Nginx解决前端跨域问题
前言 在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security.不过这种方式开发PC页面到还好,如果是移动端页面就不行了. 解决办法 使用Nginx转发请求.把跨域的接口写成调本域的接口,然后将这些接口转发到真正的请求地址. 举个栗子 例如我们在开发一个Vue应用. 原先: 调试页面是: http://192.168.1.1
-
nginx解决跨域问题的实例方法
前后端分离,使用nginx解决跨域问题 前端:vue.js+nodejs+webpack 后台:SpringBoot 反向代理服务器:nginx 思想:将前端代码打包,让nginx指向静态资源,nginx对后台请求进行转发. 1.将前端代码打包: npm run build 会生成一个dist文件夹.包含一个index.html文件和一个static文件夹,路径以我本地为例: /Users/xxx/ideaProjects/webtest/dist 2.打开 /usr/local/etc/ngi
-
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
前言 当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服务器配置响应的header参数: 一. 解决方案 只需要在Nginx的配置文件中配置以下参数: location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET
-
利用Nginx处理Vue开发环境的跨域的方法
1. 需求 本地测试域名与线上域名相同,以便正确传递 Cookie 和进行 SSO 测试. 注:由于 SSO 登录后,相关 Cookie 被加在四级域名上,因而需要做到本地测试域名和线上接口域名相同. 2. 方案 配置 Host 文件使线上域名指向 Localhost: 127.0.0.1 product.xxx.xxx.com 配置 Nginx 进行对应转发: server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.c
-
Nginx跨域设置Access-Control-Allow-Origin无效的解决办法
nginx 版本 1.11.3 使用大家说的以下配置,验证无效,跨域问题仍然存在 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置,生效. if ($request_method = 'OPTIONS') { add_heade
-
利用Nginx反向代理解决跨域问题详解
问题 在之前的分享的跨域资源共享的文章中,有提到要注意跨域时,如果要发送Cookie,Access-Control-Allow-Origin就不能设为*,必须指定明确的.与请求网页一致的域名.在此次项目开发中与他人协作中就遇到此类问题. 解决思路 一般来说,与后台利用CORS跨域资源共享将Access-Control-Allow-Origin设置为访问的域名即可,这个需要后台的配合,且有些浏览器是不支持的. 基于与合作方后台的配合,利用nginx方向代理来满足浏览器的同源策略来实现跨域 实现方法
-
解决nginx/apache静态资源跨域访问问题详解
1. apache静态资源跨域访问 找到apache配置文件httpd.conf 找到这行 #LoadModule headers_module modules/mod_headers.so 把#注释符去掉 LoadModule headers_module modules/mod_headers.so 目的是开启apache头信息自定义模块 在独立主机配置文件中新增header Header set Access-Control-Allow-Origin * 例如: <VirtualHost
-
JavaScript同源策略和跨域访问实例详解
本文实例讲述了JavaScript同源策略和跨域访问.分享给大家供大家参考,具体如下: 1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 何谓同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 同源策略: 浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性. (白帽子讲web安全[1]) 从一个域上加
-
Nginx 过滤静态资源文件的访问日志的实现
凌乱的日志 日常使用的 Nginx 大都既做静态资源服务器,也做反向代理服务器,尤其有些时候考虑到跨域问题,会对静态资源和后端接口使用同一个监听端口,如果不做一下过滤处理,会在 access_log 中看到大量的例如 js.css.jpg 等静态资源的请求,比较影响查看后端接口调用的日志 本来没有很在意这个东西,不过在浏览一篇关于 Nginx 优化的文章时,发现了一种用 map 定义一个是否写日志的参数的方法,结合最近使用 map 做动态的跨域配置,索性也是学习及记录一下 map 的另一个使用场
-
AJAX跨域问题解决方案详解
目录 1.前言 2.解决方案 2.1 设置响应头 2.2 jsonp 2.2.1 前端代码 2.2.2 后端代码 2.3 使用jQuery封装的jsonp 2.4 代理机制(httpclient) 2.4.1 前端代码 2.4.2 代理Servlet代码 2.4.3 目标Servlet代码 2.4.4 图示 2.5 nginx反向代理 1.前言 跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源. 通过超链接或者form表单提交或者window.location.href的方式进行跨域
-
JS JSOP跨域请求实例详解
在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu
-
Spring boot跨域设置实例详解
定义:跨域是指从一个域名的网页去请求另一个域名的资源 1.原由 公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域 本人是springboot菜鸟,但是做测试框架后端需要使用Springboot和前端对接,出现跨域问题,需要设置后端Response的Header.走了不少坑,在这总结一下以备以后使用 2.使用场景
-
关于python 跨域处理方式详解
因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送http请求 浏览器的同源策略(SOP/same origin policy)是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS(跨站脚本攻击 cross site scripting)和CSRF(跨站请求伪造cross-site request forgery)等攻击. (同
-
JSONP跨域请求实例详解
JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON
-
Spring实现处理跨域请求代码详解
一次正常的请求 最近别人需要调用我们系统的某一个功能,对方希望提供一个api让其能够更新数据.由于该同学是客户端开发,于是有了类似以下代码. @RequestMapping(method = RequestMethod.POST, value = "/update.json", produces = MediaType.APPLICATION_JSON_VALUE) public @ResponseBody Contacter update(@RequestBody Contacter
随机推荐
- Python中for循环和while循环的基本使用方法
- 详解Angular.js数据绑定时自动转义html标签及内容
- 在ASP.NET 2.0中操作数据之六十九:处理Computed Columns列
- 一些被忽视的PHP函数(简单整理)
- android开发环境遇到adt无法启动的问题分析及解决方法
- python实现unicode转中文及转换默认编码的方法
- jsp实现文件上传下载的程序示例
- 通过两种方式增加从库——不停止mysql服务
- php下载文件源代码(强制任意文件格式下载)
- 实例讲解多个js毫秒倒计时同时进行效果
- web标准知识——从p开始,循序渐进
- JQuery中$.ajax()方法参数详解及应用
- cwrsync server 服务启动失败的解决方法小结
- eclipse中maven插件安装教程
- java编程中字节流转换成字符流的实现方法
- jquery二级导航内容均分的原理及实现
- java如何生成可变表头的excel
- jquery 操作日期、星期、元素的追加的实现代码
- jQuery中的jQuery()方法用法分析
- jquery.post用法关于type设置问题补充