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');
    })
  })
}
复制代码

设置代理，请求成功

转载于:https://juejin.im/post/5bb03a25e51d450e9649fd87