vue專案如何使用nginx配置跨域
阿新 • • 發佈:2019-02-10
最近使用vue開發一個功能,npm run build之後打包的程式碼放在了a.com.cn下但是php介面部署在了b.com下,那麼問題來了,如何讓後端介面支援跨域。有兩種方法:
讓後端在返回資料的時候設定下返回請求的header,這種方法比較不穩定,因為介面一旦多了就得改好多程式碼,而且每次出了問題還得去找後端開發改程式碼,很煩。
另一種方法是,自己配置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
然後測試,發現就可以跨域了。