关于create react app官方文档上,有关于跨域的详细介绍,基本分两种,第一种就是直接在package.json中直接加proxy:‘https:需要跨域的域名’,缺点是高版本的react-script只支持字符串,也就是你不能匹配到多域名来进行代理了。第二种是通过http-proxy-middleware来实现多域名跨域,比较常见,具体做法是:
1.npm 安装http-proxy-middleware
2.在项目src目录下新建setupTests.js文件,注意名字不能错哦。
3.导入http-proxy-middleware,进行如下匹配规则配置:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/asg',
createProxyMiddleware({
target: 'https://api.klynf.com/',
changeOrigin: true,
})
);
};
官方文档在这里就结束了,但是如果这个时候你如果已经定义了环境变量来作为baseUrl,你会发现你的代理配置并没有生效,还是有跨域的错误,这时你只需要把在axios中配置的baseurl设置为‘/’,就可以解决这个问题了,代理会生效。
还有遇到一个之前没遇到的问题,如果axios发送post请求时,会出现 传的参数带: 的情况,这是由于axios的 headers中Content-Type的值引起的,application/x-www-form-urlencoded会引起这种情况,如果有接收数据格式formData的采用这种格式,如果没有这个需求,只要设置为multipart/form-data就能解决这个问题,如果发生了复杂请求,会导致多了个option请求,解决方法是转换为简单请求,即: 请求方法是GET、HEAD或者POST,并且当请求方法是POST时,Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值。好啦,自己碰到的一个小坑,记录一下,希望可以帮到大家