react中配置代理解决跨域问题（推荐阅读）

• 在papackage.json里配置(目前不推荐了)

//方法一：create-react-app脚手架低于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",

• 最好的方式可以通过middleware中间件进行配置（Creact React App脚手架官网推荐方法，可以配置多个代理）

//方法三：
//1.先安装http-proxy-middleware
npm install http-proxy-middleware --save
//2.然后在src目录下创建 setupProxy.js 文件
//3.最后设置代理（setupProxy.js文件内容）
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy('/api', {  //`api`是需要转发的请求 
      target: 'http://localhost:5000',  // 这里是接口服务器地址
      changeOrigin: true,
    })
  )
}

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

axios.defaults.baseURL = '/api';

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

npm run eject

用方法三配置完后要重启代码,结果遇见了问题
proxy is not a function,打印proxy，发现真的不是函数。而是一个对象,可能是官网demo写的早，proxy这个插件经过了修改？那咱也改！
既然导出的对象里createProxyMiddleware是个函数，那就用这个函数调用不就得了。

WeChat38d0bd96d84e21f5cfd02d19fff620b0.png

 

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': ''}
    })
  )
}

作者：青争小台
链接：https://www.jianshu.com/p/fd65a2051bfe
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。