在nginx为统一域名配置了http和https后,访问https时会出现对另一个的跨域访问,需要在nginx配置文件中location处添加如下内容:
location / {
add_header 'Access-Control-Allow-Origin' 'http://前端域名';
前端使用ajax跨域post数据,当nginx已经配置了header,Access-Control
-Origin 依然提示缺少Origin头部,问题分析
仔细查看,发现post请求的发送时,post请求变成了options请求,post请求的content-type是application/json
这是由于浏览器跨域请求时产生的preflight request问题,为了安全,会先发送一个options请求,浏览器获取到响应后判断header的跨域允许的域名,即服务器设置的Access-Control-Allow-Origin域名列表中是否符合当前浏览器中的域名,如果符合,再进行下一步post请求,并且这种情况时在非简单请求的情况下,简单请求与非简单请求移步阮一峰的详细说明简单请求与非简单请求,简单来说就是
- 请求方式:
- 请求头信息
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain
只有同时满足以上两个条件时,才是简单请求,否则为非简单请求
当非简单请求时浏览器会进行预请求,即preflight request
但是如果服务器没有处理第一步options请求的方法,那么第一步的options请求就不会获取到正确的header,也就无法判断当前域名是否符合跨域规则,那么就不会进行下一步的post请求, 所以浏览器就会提示跨域缺少Access-*-Origin头部, 知道了原因
举例nginx:
在add_header配置后添加处理options请求的方法,如下:
location / {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
AJAX从一个域请求另一个域会有跨域的问题。那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令。如下所示:
location /{
add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET';
the re
该问题在 Firefox 中会报错:
已拦截跨源请求:同源策略禁止读取位于 http://XXXX/x 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')
同源策略:(来自百度)
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都
出现这个问题是因为浏览器的同源策略(Same-Origin Policy)限制了从一个源(origin)加载的文档或脚本与另一个源的资源进行交互。同源策略是浏览器的一个安全特性,用于防止恶意脚本访问和修改其他网站的内容。在您的例子中,您正在尝试通过 Fetch API 从本地文件系统(file:/// 协议)加载一个 JSON 文件。由于 Fetch API 是基于 HTTP 的,而 file:/// 协议并不是 HTTP,因此浏览器将阻止这种跨源请求。
location / {
add_header 'Access-Control-AllowOrigin' $http_origin;
add_header 'Access-Control-AllowCredentials' 'true';
add_header 'Access-Control-AllowHeaders' 'DNT,web-token,apptoken,Authorization,Accept,Origin,KeepAliv
看到CORS 头缺少 'Access-Control-Allow-O这个就知道自己跨域了,跨域是指你违背了同源策略,同源策略规定了三个东西一致:协议名、主机名、端口号。
比如:http://localhost:8080/发送ajax请求到http://localhost:8090/服务器,服务器收到了请求,并把数据返回给http://localhost:8080/,但是流浪器没有进一步的给你,因为发现这哥们跨域了,算了,这数据我握在手里了,不给你了,这就是跨域。(这里一定要注意:请求发了,服务器收了,还返
在网页与接口不处于同一个服务器的前提下(前端代码放在A服务器,接口牌B服务器),ajax请求接口的时候,浏览器会为了安全问题,在接口返回数据的时候,对响应头进行检验。如果响应头中没有Access-Control-Allow-Origin:*和Access-Control-Allow-Headers:Origin, X-Requested-With
前后端开发跨域问题问题记录前端新手配置:有问题老手配置:正常后端新手配置:有问题老手配置:正常总结
今天笔者有一次遇到前后端跨域问题,下面小编详细的记录下整个过程:
环境是:后端在公司,前端在远程,两人协同开发
后端写好接口,并发布在外网后,接下来就是远程前端的对接接口阶段,前端在配置接口时,配置成功,在测试访问时,浏览器报“已拦截跨域请求:同源策略禁止读取位于接口的远程资源:原因:CORS缺少Access-Contorl-Allow-Origin”问题,错误提示是“cors跨域问题”,后端看到只
进入阿里云官网,进入OSS控制台,在Bucket 列表中选择你使用的Bucket。点击左侧的数据安全,跨域设置,创建跨域规则。原因:在阿里云终端没有设置跨域规则。再次尝试上传文件,成功。
第一种,就是在被请求的程序中添加HTTP头,即CORS跨域(跨域资源共享,Cross-Origin Resource Sharing)如: Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
'Access-Control-Allow-Origin': '*',
// HTML
<meta http-equ
已拦截跨源请求:同源策略禁止读取位于 http://192.168.x.x:x/xxx 的远程资源。(原因:CORS 头缺少
‘Access-Control-Allow-Origin’)。
Access to XMLHttpRequest at ‘http://192.168.x.x.:xxx’ from origin
‘http://localhost:8013’ has been blocked by
Access to fetch at 'https://www.baidu.com/' from origin 'http://www.baidu.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Have the server send the header with a valid
如题目所示,当浏览器进行跨域请求时,会出现跨域问题。该问题在 Firefox 中会报错:已拦截跨源请求:同源策略禁止读取位于 http://XXXX/x 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。
而在 Chrome 中会显示如下错误:XMLHttpRequest cannot load http://XXXX/x. No 'Access-C