React 解决跨域问题 When specified, “proxy” in package.json must be a string.
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.
本教程仅适用于前端跨域,本地测试跨域问题,生产中请与后端接口组搭配解决
配置React跨域时候
在网上看到是这样配置的,在package.json
里添加如下代码
"proxy": {
"/api": {
"target": "http://localhost:5000"
},
}
但是启动项目却报上面那个错误
以为我哪里写的不对,一个一个字对比,发现没毛病啊
于是在网上搜了下错误代码
在Facebook官方github里看到了
原来React新版本不支持那样设置反向代理了
新版本需要这样做
安装http-proxy-middleware
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
然后
创建一个setupProxy.js
文件
在src目录,src/setupProxy.js
例如之前的配置
"proxy": {
"/api": {
"target": "http://localhost:5000/"
},
"/*.svg": {
"target": "http://localhost:5000/"
}
}
setupProxy.js文件里则这样写
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://localhost:5000/' }))
app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))
}
完整的写法
app.use(proxy('/api', {
target: 'https://localhost:5000/',
changeOrigin:true,
pathRewrite: {
"^/api": "/"
}
}))
最新更新,生产环境下如何搭配NGINX解决跨域问题
https://www.joynop.com/p/172.html
更多问题看:https://github.com/facebook/create-react-app/issues/5103
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭