Uncaught(in promise)SyntaxError:Unexpected token < in JSON at position 0
在學習React的時候(腳手架搭建的配置環(huán)境) 解決跨域問題洼裤,使用了客戶端代理發(fā)生的錯誤
當時使用的方法?
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
? ? }
? }));
};
(發(fā)生此bug就是使用的第二種方案)君旦,解決方案是第三種
方案3
配置create-react-app環(huán)境下的webpack
/ config/webpackDevServer.js
proxy: {
? '/api': {
? ? target: 'http://vareyoung.top', // 后臺服務地址以及端口號
? ? ws: true, // websoket 服務
? ? changeOrigin: true, //是否跨域
? ? pathRewrite: { '^/api2': '/api' }
? }
}