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

作者: tww844475003 分类: 前端开发 发布时间: 2021-07-03 22:45

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

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

网上很多教程都在 “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

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

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注