备战面试！十分钟学会在react中配置代理解决跨域的问题

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

用最短的时间学会必备的知识

1、方法1 在papackage.json里配置

这种方法目前已经不推荐了，因为create-react-app脚手架低于2.0版本时候，可以使用对象类型，高于2.0版本就会报错

//后面2项看需求（pathRewrite，secure），一般可以不写
"proxy":{
 "/api":{
  "target":"http://m.kugo.com",//目标服务器
  "changeOrigin": true//默认false，是否需要改变原始主机头为目标URL
  "pathRewrite": {"^/api" : "/"},// 重写请求，比如我们源访问的是api，那么请求会被解析为/
  "secure": false, //如果是https接口 需要配置这个参数为true
}
}

最新的create-react-app脚手架2.0版本以上只能配置string类型

"proxy": "http://m.kugo.com",

方法2 使用middleware中间件进行配置，也是脚手架官网推荐方法，可以配置多个代理

1、安装http-proxy-middleware
2、然后在src目录下创建 setupProxy.js 文件
3、最后设置代理（setupProxy.js文件内容）
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy.createProxyMiddleware('/api', {  //`api`是需要转发的请求 
      target: 'https://www.baidu.com/',  // 这里是接口服务器地址
      changeOrigin: true,
      pathRewrite: {'^/api': ''}
    })
  )
}

注意点

1、这里需要注意的是我们的axios的baseURL，设置的时候不能还设置加上原来服务器域名的地址，应该只设置 /api就好了

2、一般下载的新脚手架的项目根目录中没有config文件,暴露出项目配置文件，项目下执行:

npm run eject