使用Nginx來解決跨域的問題

龍恩0707發表於2018-04-24
Nginx跨域

使用Nginx來解決跨域的問題

nginx的版本：(檢視nginx命令： /usr/local/nginx/sbin/nginx -v)
nginx/1.4.3

問題是：前端專案域名是 a.xxxx.com, 後端的介面域名是 b.xxx.com，然後後端介面沒有設定跨域相關的響應設定頭，因此就介面和我們
域名就會存在跨域的情況，因此我們可以使用 nginx伺服器來配置一下；

網上很多資料將 在nginx配置下 加如下程式碼就可以解決跨域的問題；

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET,POST;

比如在nginx上如下配置：

server {
    listen 443;
    listen 80;
    server_name b.xxx.com;
    access_log  /data/www/logs/nginx/access.log main;

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Methods GET,POST;

    include nginx_xxx.conf;
    location / {
        proxy_pass http://192.168.1.212:8136;
        #proxy_pass http://xd-mfa-mng/;
        include nginx_proxy.conf;
    }
    error_page   500 502 503 504  /502.html;
    location = /50x.html {
        oot   html;
    }
}

但是還是會存在跨域的情況，俗話說，夢想是美好的，但是現實很殘酷的。因此我們需要指定 對應的域名就可以解決上面的跨域問題了。

add_header Access-Control-Allow-Origin http://a.xxx.com;

如上配置就可以使用nginx解決跨域的問題了；

因此程式碼變為如下：

server {
    listen 443;
    listen 80;
    server_name b.xxx.com;
    access_log  /data/www/logs/nginx/access.log main;

    add_header Access-Control-Allow-Origin http://a.xxx.com; 
    add_header Access-Control-Allow-Credentials true;

    include nginx_xxx.conf;
    location / {
        proxy_pass http://192.168.1.212:8136;
        #proxy_pass http://xd-mfa-mng/;
        include nginx_proxy.conf;
    }
    error_page   500 502 503 504  /502.html;
    location = /50x.html {
        oot   html;
    }
}

注意：

1. Access-Control-Allow-Origin
伺服器預設是不允許跨域的，給Nginx伺服器配置 Access-Control-Allow-Origin *; 後的含義，表示伺服器可以接受所有的請求源，即接受所有跨域的請求。但是這樣設定在專案中並沒有解決跨域，但是設定了具體的專案域名，比如 http://a.xxx.com 後，就可以跨域了；這有些不符合常理，但是情況確實如此；

相關文章