nginx 解决跨域问题 No 'Access-Control-

2020-03-06 本文已影响0人正为疯狂

之前和前端配合解决跨域问题时nginx大体是这样配置的，一直也没问题：

server {
    listen  80;
    server_name xxxx;
    root  /data/www/zp/web/;

    access_log  /var/log/nginx/master.log;
    error_log /var/log/nginx/master_error.log;
 
    location / {
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://unix:/usr/gunicorn_sock/zp.sock;
        uwsgi_send_timeout 5;
        include uwsgi_params;

        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'OPTIONS';
            add_header Access-Control-Allow-Credentials true;
            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';
            return 204;
        }

    }
}

在对应的‘location’中加入OPTIONS允许配置。
一直这样配置就没问题了的。

现在换了工作换了服务器换了配合的前端同事
结果出问题了。
No 'Access-Control-Allow-Origin'又出现了
前端说ta用的axios框架，我之前同事用的fetch框架，我不懂不知道和这有没有关哈，可能吧
也可能nginx版本问题，毕竟之前服务器两年没更新版本

最后查了很久才解决，还是我来改的nginx配置

最终nginx 配置

http

首先在 nginx.conf 根配置文件中，http模块里面加入这几行配置：

    add_header Access-Control-Allow-Origin *;
    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;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS,PATCH;

我感觉主要就是卡在这了，一直没在网上查到说在这配置的。

server

server 也要添加

add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods  GET,POST,PUT,DELETE,OPTIONS,PATCH;
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;

location

location添加 request_method 判断 options请求，{}中内容和前面一样

if ($request_method = 'OPTIONS') {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS,PATCH;
    add_header Access-Control-Allow-Credentials true;
    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;
    return 204;
}

server 配置

server {
    listen       80;
    server_name  ***;
    index index.html index.htm index.php;
    root  /data/www/zp/web/;

    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Methods  GET,POST,PUT,DELETE,OPTIONS,PATCH;
    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;

    location / {
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://unix:/usr/gunicorn_sock/zp.sock;
        uwsgi_send_timeout 5;
        include uwsgi_params;
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS,PATCH;
            add_header Access-Control-Allow-Credentials true;
            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;
            return 204;
        }
    }

    access_log  /var/log/nginx/zp/access_log.log;
    error_log /var/log/nginx/zp/error_log.log;
}