npm run dev 在本地調試出現跨域問題解決方法

npm run dev 在本地調試出現跨域問題

在localhost:8080調試時會出現跨域問題，如圖：

個人項目是用webpack做爲前端自動化構建工具，能夠在webpack-dev-server中配置跨域。webpack-dev-server是一個小型的nodejs服務器，是基於express框架的，用於實時監聽和打包編譯靜態資源。其中裏面有一個屬性是proxy，是專門來配置代理請求接口的。

// # 項目\config\index.js
dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // # 配置代理
    proxyTable: {
        '/apis': {
          target: 'http://dev.daishutijian.com',
          changeOrigin: true,
          pathRewrite: {
            '^/apis': ''
          }
        }
    },
    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    ...
},
複製代碼

將 http://dev.daishutijian.com映射爲^/apis

// # 發送請求
const API_PATH = "apis/apps/api/";
function getOrderList(vm) {
  let url = API_PATH + 'user/order_list';// # http://dev.daishutijian.com/apps/api/user/order_list
  return new Promise((resolve, reject) => {
    Vue.http.get(
      url, {
        emulateJSON: true
      },
    ).then((res) => {
      resolve(res.data);
    }).catch((res) => {
      console.log('warn');
    })
  })
}
複製代碼

設置代理，請求成功