美文网首页
nginx 解决跨域问题 No 'Access-Control-

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

作者: 正为疯狂 | 来源:发表于2020-03-06 20:26 被阅读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;
    }
    

    我尝试去删掉server中配置,发现会报错。看来三处是必须要加了。
    在这做个备忘,希望可以节省遇到同样问题的朋友时间。

    相关文章

      网友评论

          本文标题:nginx 解决跨域问题 No 'Access-Control-

          本文链接:https://www.haomeiwen.com/subject/fvwwrhtx.html