1. 程式人生 > >vue專案如何使用nginx配置跨域

vue專案如何使用nginx配置跨域

最近使用vue開發一個功能,npm run build之後打包的程式碼放在了a.com.cn下但是php介面部署在了b.com下,那麼問題來了,如何讓後端介面支援跨域。有兩種方法:

  1. 讓後端在返回資料的時候設定下返回請求的header,這種方法比較不穩定,因為介面一旦多了就得改好多程式碼,而且每次出了問題還得去找後端開發改程式碼,很煩。

  2. 另一種方法是,自己配置nginx,首先ssh登入到部署介面所在的伺服器,修改nginx配置,在http物件中加入兩行程式碼:

http {
  // 需要加入的程式碼
  add_header Access-Control-Allow-Origin http://a.com.cn
add_header Access-Control-Allow-Credentials true server { // b.com.cn的具體配置 } }

改完重啟下nginx,然後在vue專案中,在匯入axios的地方加如以下程式碼:

import axios from 'axios'
axios.defaults.withCredentials = true

然後測試,發現就可以跨域了。