vue.js - vue 打包後 nginx 服務端API請求跨域問題無法解決。

Question

我把vue打包傳到服務端後 放在 www 子網域所指定的目錄裡。當我發起請求的時候要去請求 api 子網域所綁定的目錄。這項請求就造成了跨域提示

#然後我在nginx 裡也配置了也無解。

#也就是我請求 www.daimatu.cn/api/login/index ajax post 請求 轉發到 api.daimatu.cn/api/login/index 去

我之前在 location / {} 和 location /api {} 裡做了很多設定 都是網路上百度來的，然後並沒有用~！

然後我在我本的把請求的位址改為線上的，本地請求也沒有問題！是通的能正常操作。我對比了下兩邊的請求頭發現不一樣！本機請求線上服務端Request Method 是正常的GET POST 而我線上從www 轉到請求api 的Request Method 變成了OPTIONS 而不是正常的GET POST 等請求頭我也搜尋找了設定OPTIONS 怎麼設定請求的時候跨域還是無法解決了！

#如圖上所示 變成了 options 了

我想請教下大夥 你們是如何配置的。我後端語言是PHP 不要叫我去設定更改PHP。我本地請求本地服務和線上服務都是通的正常的，只有線上www 轉發請求 api 有問題。所以不用改程序。

Api 請求位址： http://api.daimatu.cn/api/log...
Api 帳號： admin
Api 密碼： 123456
Api 驗證碼： 1234
求大夥NGINX伺服器請求我這個API過來看你們的設定。我已經折騰半天也沒成功了！ ！

Answer 1

在location中作如下配置

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

然後重啟nginx服務

service nginx reload