webpack代理请求api,解决跨域问题。

2017-12-29  本文已影响0人  hansduo

前些时间学习react过程中,碰到一个情况。
请求测试环境的api,因为跨域,在跑项目时报错。

最初想法是nginx代理服务器地址和webpack地址,结果因为不清楚的原因(技术深度不够)。这个方法没能生效。

之后就了解到了,webpack可以直接进行代理。将服务器api代理到webpcak同一个ip和端口下。

暂时解决了本地开发的问题。

devServer: {
    contentBase: './src/',
    historyApiFallback: true,
    hot: true,
    port: defaultSettings.port,
    publicPath: defaultSettings.publicPath,
    noInfo: false,
    proxy: {
      '/api': {
        target: 'http://localhost:8085/',
        pathRewrite: {'^/api' : '/seckill'},
        changeOrigin: true
      }
    }
  },

主要是proxy内的设置。

后台api完整地址:http://localhost:8085/seckill/time/now
通过代理设置,在react内请求:http://localhost:8000/api/time/now 即是请求上面的接口。
(webpack端口 8000)
记录以备忘

上一篇下一篇

猜你喜欢

热点阅读