node.js - 關於nginx中CORS跨域配置的問題
迷茫
迷茫 2017-06-12 09:24:25
0
3
877

最近折騰了一個vue的項目,想放到自己的雲端伺服器上,伺服器系統是centos 7,已經安裝了node和nginx,但是把打包好的項目通過nginx代理後,發現不能進行跨域請求,於是各種google百度如何在nginx配置cors跨域,試了很多代碼,都沒效果,望大神幫我看一下。

nginx.conf配置如下:

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  maxutian.cn www.maxutian.cn;
        root         /root/hexo/public;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
    }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

    server {
        listen       80;
        server_name  music.maxutian.cn;
        root         /root/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
    
    
        location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
    }
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

由於伺服器中不只一個vue項目,所以設定了一個二級域名,寫了兩個server。第一個server是我的博客,第二個server是vue專案。我的配置應該沒問題把?

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回覆(3)
女神的闺蜜爱上我

樓主需要先了解什麼是CORS,推薦先看看以下這篇文章

HTTP存取控制(CORS)

漂亮男人

參考我寫的知乎專欄文章:

https://zhuanlan.zhihu.com/p/...

劃重點- add_header 要加 always:

add_header Access-Control-Allow-Origin * always;
Ty80

可以使用nginx代理轉送來實現跨域

server {
    listen  80;
    server_name 127.0.0.1;

    location ~ /api/ {
        proxy_pass  http://127.0.0.1:8081;
        proxy_set_header Host $host:80;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

將http://127.0.0.1/api/請求轉寄到http://127.0.0.1:8081

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板