Uncaught(in promise)SyntaxError:Unexpected token < in JSON at position 0
在学习React的时候(脚手架搭建的配置环境) 解决跨域问题,使用了客户端代理发生的错误
当时使用的方法
yarn eject 解构出所有的文件,(不可逆)
方案1
//配置: package.json
"proxy":"https://localhost:3000"
此方法只能配置一个服务器一般不使用
方案2
利用客户端代理中间件(http-proxy-middleware)完成, 官网给了新的使用方式,在src下新建文件setupProxy.js加下面代码,无需单独应用,webpack会自动引入文件。
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use('/api', createProxyMiddleware({
target: 'http://localhost:3001',
changeOrigin: true,
}));
app.use('/api2', createProxyMiddleware({
target: 'http://vareyoung.top',
changeOrigin: true,
pathRewrite: { //路径替换
'^/api2': '/api', // axios 访问/api2 == target + /api
}
}));
};
(发生此bug就是使用的第二种方案),解决方案是第三种
方案3
配置create-react-app环境下的webpack
/ config/webpackDevServer.js
proxy: {
'/api': {
target: 'http://vareyoung.top', // 后台服务地址以及端口号
ws: true, // websoket 服务
changeOrigin: true, //是否跨域
pathRewrite: { '^/api2': '/api' }
}
}