react proxy 详解，跨域配置 proxy is not a function

一个前后端分离的项目，本地联调，跨域配置至关重要。

传统设置浏览器跨域设置这里就不继续累赘了。

网上很多教程都在 “package.json” 里边设置

"proxy": {
  "/api": {
    "target": "http://localhost:3001"
  }

}

初接触的小伙伴，直接按这种方式都做了发现有问题，结果项目都起不来了。

When specified, “proxy” in package. json must be a string.
Instead, the type of “proxy” was “object”.
Either remove “proxy” from package. json, or make it a string.

翻译：

当指定时，“代理”在包中。 Json必须是字符串。  

相反，“代理”的类型是“对象”。  

或者从包中删除“代理”。 Json，或者使它成为一个字符串。  

看到这种报错，很多小伙伴就蒙了，脾气爆的心里 “十万只草你马…..” 就来了。这谁呀，瞎搞，写个错误的文档。

其实并不是笔着写错了，只是我们的小伙伴跟笔者的 react.js 版本不一致。经常留意 facebook 官方信息的同学就会发现，原来 React 新版本不支持那样设置反向代理了。别在骂笔者了，他们也不容易，花了自己的休息时间才完成了这个文档。

通过报错信息其它也可以很清楚的理解，package.json proxy 设置不支持 object ,只支持字符串。

"proxy": "http://localhost:3001/"

这样还是可以实现代理的，只是没办法实现多个域名，对有的小伙伴的项目并不实用。

facebook 突然不再支持，是不是 react.js 就不能做代理了，答案当然是否定的。

官方推荐：用中间件实现代码 http-proxy-middleware

npm i -S http-proxy-middleware

在 src 目录下新建 setupProxy.js

const proxy = require('http-proxy-middleware')
 
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:3001/' }))
  app.use(proxy('/admin', { target: 'http://localhost:3002/' }))
}

这样就能实现跨域代理了，是不是这样了？

是的，但是还是要注意 “http-proxy-middleware” 这个中间件的版本，1.x 以下的版本确实是这样配置，如果小伙伴的中间件版本是比较高的话，配置又有些不一样了。

笔者用的是最新版，比如：”http-proxy-middleware”: “^2.0.1”,

启动项目你就会发现，项目启动不了

proxy is not a function

error Command failed with exit code 1.

到这小伙伴不要着急，不是其它地方配置错了，是 “http-proxy-middleware” 中间件有重大更新了

可以去 npm 官网看看这个模块的最新资料 https://www.npmjs.com/package/http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://localhost:3001',
    changeOrigin: true
  }))
};

实现 proxy 的代理函数不再是默认导出了 createProxyMiddleware

微信公众号搜索“前端开发那点事”