Nginx 配置 Vue 專案解決跨域問題

Zhengkx發表於2020-04-30
NginxVue跨域

Nginx 配置 Vue 專案解決跨域問題

例行交代背景 終於來了一個h5前端了。自己不用再去搞頁面。因為前端是用 Vue 開發的，所以就會出現一個跨域的問題。

問題出現，我給的介面在自己除錯的時候是正常訪問正常返回資料，但是在他的專案呼叫介面報錯：

Access to XMLHttpRequest at 'http://*******.com/23/sff' from origin 'http://232.168.322.64:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

這就涉及到跨域的問題。

這裡我是用 Nginx 來部署 Vue 專案的，所以這裡直接修改 Nginx 專案配置檔案，先把配置附上

    server
    {
        listen 80;
        server_name test.com ;
        index index.html index.htm index.php;
        root  /home/dfs/h5/master;

        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

        location / {
           try_files $uri $uri/ /index.html;
           if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
                add_header Access-Control-Allow-Headers *;
                add_header Access-Control-Allow-Credentials 'true';
                return 200;
            }

            if ($request_method = 'POST') {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Credentials 'true';
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                add_header Access-Control-Allow-Headers *;
            }
        }

        location /api {
                proxy_pass http://baidu.com;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        access_log  /home/wwwlogs/test.com.log;
    }

大概就是這樣的配置。

location /api {
    proxy_pass http://baidu.com;  ## 服務端介面域名
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; ## 包含了客戶端和各級代理ip的完整ip鏈路
}

這個配置，主要是攔截相關的路由然後轉發到對應服務端的介面去。

/api 這裡是路由的一個路徑，可以說類似一個標示。eg：

## 服務端給h5的介面地址
http://server.com/api/test

特別注意⚠️ ：這裡只需配置 H5 專案，不需要改動服務端的。舉個例子

## 服務端域名
http://server.com
## h5 域名
http://h5.com

## 介面地址
http://server.com/api/test

## 這個時候h5呼叫的介面則要使用自己的域名，然後通過 nginx 代理來實現轉發，從而解決跨域的問題
http://h5.com/api/test
本作品採用《CC 協議》，轉載必須註明作者和本文連結

好好管教自己，不要管別人

相關文章