react 处理代理跨域

第一步：下载 http-proxy-middleware插件
npm install http-proxy-middleware
第二步：在src文件夹下创建一个名为setupProxy.js的文件
第三步在setuoProxy.js文件中写如下代码：

const {createProxyMiddleWare} = require('http-proxy-middleeware')
module.exports = function(app){
  app.use(
      createProxyMiddleware(
          '/api',{      //使用/api替换http://地址
              target:'http://www.xiadachuan.cn',
            changeOrigin:true,    //changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host,
                                  // 如果设置成true：发送请求头中host会设置成target·
            pathRewrite: {
              '^/api': '',        //将api代理到target网址，必写，不写会直接代理到http://111.229.83.241:9601/api
            },
            secure: false, // 是否验证证书
          })
      // createProxyMiddleware(
      //     '/apc',{      //使用/apc替换http://任务管理地址
      //       target:'http://www.xiadachuan.cn:8082',
      //       changeOrigin:true,    //changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host,
      //                             // 如果设置成true：发送请求头中host会设置成target·
      //       pathRewrite: {
      //         '^/apc': '',        //将api代理到target网址，必写，不写会直接代理到http://111.229.83.241:9601/api
      //       },
      //       secure: false, // 是否验证证书
      //     }),
//       createProxyMiddleware(
//           '/apl',{      //使用/apc替换http://任务管理地址
//               target:'http://123.56.114.184:8081',
//               changeOrigin:true,    //changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host,
//                                     // 如果设置成true：发送请求头中host会设置成target·
//               pathRewrite: {
//                   '^/apl': '',        //将api代理到target网址，必写，不写会直接代理到http://111.229.83.241:9601/api
//               },
//               secure: false, // 是否验证证书
//           }),
//       // createProxyMiddleware(
//       //   '/apc',{      //使用/apc替换http://任务管理地址
//       //       target:'http://172.16.6.12:8888/',
//       //       changeOrigin:true,    //changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host,
//       //                             // 如果设置成true：发送请求头中host会设置成target·
//       //       pathRewrite: {
//       //           '^/apc': '',        //将api代理到target网址，必写，不写会直接代理到http://111.229.83.241:9601/api
//       //       },
//       //       secure: false, // 是否验证证书
//       //   }),
//       createProxyMiddleware(
//           '/apt',{      //使用/apc替换http://任务管理地址
//               target:'http://www.xiadachuan.cn',
//               changeOrigin:true,    //changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host,
//                                     // 如果设置成true：发送请求头中host会设置成target·
//               pathRewrite: {
//                   '^/apt': '',        //将api代理到target网址，必写，不写会直接代理到http://111.229.83.241:9601/api
//               },
//               secure: false, // 是否验证证书
//           }),
//       createProxyMiddleware(
//           '/apw',{      //使用/apc替换http://任务管理地址
//               target:"http://172.16.6.15:8888",
//               changeOrigin:true,    //changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host,
//                                     // 如果设置成true：发送请求头中host会设置成target·
//               pathRewrite: {
//                   '^/apw': '',        //将api代理到target网址，必写，不写会直接代理到http://111.229.83.241:9601/api
//               },
//               secure: false, // 是否验证证书
//           })
// )
  )
};

该方法可以配置多个代理
第四步使用代理，即在调用接口时前面加一个'/api'即可，'/api'是在setupProxy.js文件中设置的代理http地址。