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配置。

（完）