关于react脚手架的代理跨域配置与分析

关于react脚手架的代理跨域配置与分析

1. 第一步

在 src 文件夹下创建 名为setupProxy.js(名字不能变注意大小写)

2. 第二步

** 引入以下代码**

 const proxy = require('http-proxy-middleware') // 不用下载脚手架自带
 module.exports = function(app){
 app.use(
 //==========================================================
 proxy('/api1',{ // 遇见有这个前缀的请求，就触发该代理装置 
 target : 'http://localhost:5000',//请求转发给谁
 changeOrigin ： true , //(默认为false) //控制服务器收到的请求头中的Host的值
 pathRewrite : {'^/api1': ''} // 你在上面莫名奇妙的加了/api1字段 在 请求字段中 ， 执行到现在 就要去掉          它，这段代码的作用就是  用 '' 替换掉 '/api1' 
    }),
 //====================================================
 //案例假如 :   脚手架的默认端口  http://localhost:3000     后端接口为 get请求   http://localhost:5800/userInfo 获取用户数据     （记得在axios 请求路径变成 http://localhost:3000/api2/userInfo ）  那么就可以配置成如下            
 // ============可以配置多个复制粘贴改参数即可===========
     proxy('/api2',{ // 遇见有这个前缀的请求，就触发该代理装置 
 target : 'http://localhost:5800',//请求转发给谁
 changeOrigin ： true , //(默认为false) //控制服务器收到的请求头中的Host的值
 pathRewrite : {'^/api2': ''} // 你在上面莫名奇妙的加了/api1字段 在 请求字段中 ， 执行到现在 就要去掉          它，这段代码的作用就是  用 '' 替换掉 '/api1' 
    }),
  // ================================================================
   )
 }