解决nginx跨域问题

Posted 2021-01-19

解决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

#跨域测试
见下图标红内容 ↓