Vue專案跨域設定,axios跨域不成功的一個小問題( Vue CLI3跨域請求,Vue proxyTable配置,Access-Control-Allow-Origin )
阿新 • • 發佈:2019-01-04
Vue專案,因為前後端分離,所以在請求後端介面時,時常遇到跨站問題,
2、如果前後端部署在同一個域名,就不會有跨域問題,但一般是生產環境部署是同一個域名下,但在開發環境時,並不是同域名呀,所以開發時呼叫介面返回類似“No 'Access-Control-Allow-Origin' header is present ...”錯誤
我發現有朋友按這個配置好了,但請求還是報錯,其實忽略了一個問題,介面url要寫相對路徑,
Vue專案請求介面,一般使用axios這個類庫,看一下示例程式碼:
export const apiAdslotList = function (page, pageSize, adKey, adTitle, succBack, failBack, errBack) { let url = '/papi/adslot/getAdList' // 要寫相對路徑 // let url = 'http://xxxxx.com/papi/adslot/getAdList' // 不能寫絕對路徑 let params = { page_no: page, page_size: pageSize, ad_key: adKey, ad_title: adTitle } return apiPost(url, params, function (res) { if (succBack) { succBack(res) } }, failBack, errBack) }
如上面程式碼所示,url 要寫相對路徑,如 ‘/papi/adslot/getAdList’,這樣才會請求當前域,假如本地執行是 http://localhost:3000,拼接後就是 http://localhost:3000/papi/adslot/getAdList ,這樣就沒跨域了,前面配置proxy才能攔截請求轉向真正的後端地址,如果直接寫http開頭的,就是直接請求對應域名去了,與 localhost:3000 不同域,也沒有用上前面的 proxy配置。
(完)