vue webpack配置解決跨域問題

huangenai發表於2018-10-01
VueWeb跨域

現在基本專案都是實行前後端分離的原則，不管是ng 或者是vue 在開發中都無法避免跨域的這個問題

本人剛上手第一個vue專案，在呼叫api的時候出現了跨域的這個問題

這是封裝好一個簡單的post 請求

http.js

  post (url, data) {
    return axios({
      method: `post`,
      baseURL: `/api`,
      url,
      data: data,
      timeout: 10000,
      headers: {
        `X-Requested-With`: `XMLHttpRequest`,
        `Content-Type`: `application/json`
      }
    }).then(
      (response) => {
        return response
      }
    )
    )
  }

在呼叫的時候 先import 這個http 後 this.http.post(url,data) 呼叫api介面出現跨域問題

一開始我是用的webpack反向代理解決跨域的問題。

開啟專案目錄下的/config/index.js 找到 proxyTable

proxyTable: {
      `/api`: {
        target: `http://192.0.67.65/api`,
        changeOrigin: true,
        pathRewrite: {
          `^/api`: ``
        }
      }
}

在開發過程中 ok 解決了 跨域的問題。

在 釋出 npm run build 部署在本地開啟的時候 出現404 錯誤。

只好然服務的進行處理解決跨域的問題

header(`Access-Control-Allow-Origin:*`);//允許所有來源訪問 
header(`Access-Control-Allow-Method:POST,GET`);//允許訪問的方式

 

 

此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。

如果對您有幫助請動動滑鼠右下方給我來個贊，您的支援是我最大的動力。

 

相關文章