大家好，又见面了，我是你们的朋友全栈君。
由于浏览器同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制。即会出现跨域请求禁止。
通俗一点说就是如果存在协议、域名、端口或者子域名不同服务端，或一者为IP地址，一者为域名地址（在跨域问题上，域仅仅是通过”url的首部”来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP），之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
但很多时候我们却又不得不去跨域请求资源，这个时候就需要我们想方法去绕过浏览器同源策略的限制了。
常见的跨域请求解决方法：
1.Jsonp 利用script标签发起get请求不会出现跨域禁止的特点实现 2.window.name iframe 借助中介属性window.name实现 3.Cors需要服务器设置header：Access-Control-Allow-Origin 4.Nginx反向代理 可以不需要目标服务器配合，不过需要Nginx中转服务器，用于转发请求（服务端之间的资源请求不会有跨域限制）
Nginx跨域访问解决方案
使用Ajax跨域请求资源，Nginx作为代理，出现以下错误：
代码语言：javascript复制The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed解决方法： 使用Nginx作为反向代理服务器，并在配置中对应的location下添加上如下的设置
代码语言：javascript复制add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header Cache-Control private;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';完整配置如下：
代码语言：javascript复制server {
listen 80;
server_name 192.168.16.190;
root /home/fastdfs/file/data;
index index.htm index.html;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header Cache-Control private;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
location / {
# 此处用于处理 H5 的 History时 重写的问题
if (!-e $request_filename) {
rewrite ^(.*) /index.html last;
break;
}
}
# 代理服务端接口
location /api {
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
return 200;
}
proxy_pass http://192.168.16.191:3000/api; #将真正的请求代理到API 服务地址
}
location ^~/cross_origin/ {
rewrite ^/cross_origin/(.*)$ /$1 break;
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
return 200;
}
proxy_pass http://192.168.16.191:3000/cross_origin ; #将真正的请求代理到API 服务地址
}
} 服务端允许跨域配置：
代码语言：javascript复制#region 设置允许跨域，允许复杂请求
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,PATCH,OPTIONS");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");
//HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
HttpContext.Current.Response.End();
}
#endregion备注： 如果服务器设置了允许跨域，使用Nginx代理里面就不需要了（或者就不用使用Nginx了）
大家可以参考这个Nginx文档：http://nginx.org/en/docs/http/ngx_http_headers_module.html cores里面参数含义请参考：https://blog.csdn.net/m0_37886429/article/details/83617880
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/187130.html原文链接：https://javaforall.cn
