解决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跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

nginx反向代理解决跨域

使用nginx代理解决跨域问题

nginx配置解决前端跨域问题

Nginx 设置cors跨域

Nginx 设置cors跨域

nginx配置反向代理解决vue跨域问题