React中使用http-proxy-middleware跨域

React中使用http-proxy-middleware跨域

基于create-react-app 和axios

在create-react-app 2.0 之前，可以通过在package中添加proxy 来实现，如下
package,.json

"proxy": "http://0.0.2.89:300"

2.0之后官方推荐使用http-proxy-middleware

具体用法如下
在src路径下新建setupProxy.js
注意文件名必须是这个setupProxy.js 否则跨域失败

// setupProxy.js
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        proxy('/commonredirect', {  //`commonredirect`是需要转发的请求
            target: 'http://oil.server.zh8848.com/OilWxManage.aspx/',  // 这里是接口服务器地址
            changeOrigin: true,
            secure: false,
            pathRewrite: {
                "^/commonredirect": "/"
            },
        })
    )
};

文件名不能叫其他的原因：前端没有node服务器，是通过webpack的devServer跑起来的，在webpack.config.json中

tsconfig: paths.appTsConfig,
          reportFiles: [
            '**',
            '!**/__tests__/**',
            '!**/?(*.)(spec|test).*',
            '!**/src/setupProxy.*', //这里
            '!**/src/setupTests.*',
          ],
          silent: true,

所以不需要额外再引入一次，新建这样的文件夹即可跨域成功