react 脚手架关于跨域的坑，及axios中post请求参数带：的解决方案

最新推荐文章于 2023-03-31 20:23:52 发布

°Carl

最新推荐文章于 2023-03-31 20:23:52 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_51427204/article/details/122481879

本文介绍使用create-react-app时解决跨域问题的方法，包括直接在package.json中配置代理及使用http-proxy-middleware实现多域名代理。同时解决axios配置baseUrl时出现的跨域错误及post请求参数问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于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中的一个值。好啦，自己碰到的一个小坑，记录一下，希望可以帮到大家