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

前些时间学习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)
记录以备忘

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容