解决nginx跨域问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决nginx跨域问题相关的知识,希望对你有一定的参考价值。
解决nginx跨域问题
1. 无法跨域现象
访问请求外域URL无法访问,浏览器认为访问外域URL不安全,导致访问不了简称跨域问题。如下图:
2. 参数说明
#context配置段: server, location
Access-Control-Allow-Origin
注释:"表示允许访问的外域URI"
Access-Control-Allow-Origin:*
注释:""*"允许访问任何外域URL"
Access-Control-Allow-Methods
注释:"首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法"
Access-Control-Allow-Credentials
注释:"表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可"
3. Nginx允许跨域配置方法
A 1.允许单域名跨域
add_header ‘Access-Control-Allow-Origin‘ ‘http://ky.test.com‘;
add_header ‘Access-Control-Allow-Credentials‘ ‘true‘;
add_header ‘Access-Control-Allow-Methods‘ ‘GET,POST,OPTIONS‘;
B 2.允许多域名跨域
#nginx跨域配置
#配置段context: http
#map指令用来创建变量,仅在变量被接受的时候执行视图映射操作
map $http_origin $corsHost {
#默认值,当没有设置 default,将会用一个空的字符串作为默认的结果
default 0;
"~http://ky.test1.com" http://ky.test1.com;
"~https://ky.test1.com" https://ky.test1.com;
"~http://ky.dev1.com" http://ky.dev1.com;
"~https://ky.dev1.com" https://ky.dev1.com;
}
#配置段context: server, location
add_header ‘Access-Control-Allow-Origin‘ ‘$corsHost‘;
add_header ‘Access-Control-Allow-Credentials‘ ‘true‘;
add_header ‘Access-Control-Allow-Methods‘ ‘GET,POST,OPTIONS‘;
C 3.允许来自任何域的访问
add_header Access-Control-Allow-Origin ‘*‘;
4. 重载nginx并测试
#重载nginx
nginx -t
nginx -s reload
#跨域测试
见下图标红内容 ↓
以上是关于解决nginx跨域问题的主要内容,如果未能解决你的问题,请参考以下文章