axios post请求跨域403以及传参问题解决

╰半夏微凉° 2021-08-30 21:26 1202阅读 0赞

一个react的项目，其中使用axios作为http请求工具，在使用时遇到了一些坑，记录I一下。

**1、get请求，报跨域错误：**

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

后端使用springmvc，在controller的方法中，添加response的响应控制即可：

httpResponse.addHeader("Access-Control-Allow-Origin", "*");
    httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    httpResponse.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

注：如果后端接口是别人的项目，你无权修改代码时，可以在chrome浏览器上安装一个CORS插件。（亲测，该插件只对get请求起作用，对于post请求的跨域问题仍然报错）

**2、post请求，报跨域错误：**

axios用post发送请求，controller中使用post方式接受，并且在controller方法上同样给response响应头中添加上述字段，但仍然报跨域错。通过chrome开发模式network页签中可以看到，一个请求分被发送了两次，一次403，一次是无响应，而且通过header看到，明明是post方式，但是转成了options。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

这是找一篇文章：[https://segmentfault.com/q/1010000008292792][https_segmentfault.com_q_1010000008292792]

大致意思是：

首先，axios 发送请求时的数据默认是 JSON 格式的。这是导致用 axios POST 跨域出错的主要原因。

根据 CORS 的标准，当浏览器发送跨域请求时，如果请求不是GET或者特定POST（Content-Type只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain的一种）时，强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务器端对跨源请求所支持 HTTP 方法。

解决方方法很多，但是亲测了一种简单有效的方式：

*  对于springmvc4.0以上版本，直接在controller（全局）或者方法上使用@CrossOrigin 注解即可。
 *  对于springmvc4.0以下版本，使用拦截器。

参考：[https://blog.csdn.net/lovelichao12/article/details/79272261][https_blog.csdn.net_lovelichao12_article_details_79272261]

注：使用上述方法后，需要把手动设置的response响应头信息去掉，否则会冲突！

**3、axios post传参，springmvc接收不到参数：**

axios发送post请求时，出现了参数后台接收不到的情况，分析了下请求，发现是请求头content-type不对，是application/json，正常应该是application/x-www-form-urlencoded。解决方法有以下三种：

1）设置axios的默认请求头：

//设置全局的
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    var instance = axios.create({}) // 这样创建出来的 只需要：
    instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2）使用URLSearchParams来构建参数：（亲测有效）

var params = new URLSearchParams();
    params.append("username", _this.username);
    params.append("password", _this.password);
    axios.post("/service/login", paramsOfJson
                ).then(function (response) {
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                })

3）后台使用@requestBody接收：

@PostMapping(value = "/login")
    public String testLogin(@RequestBody Map dataMap)

参考：[https://blog.csdn.net/qq\_36666651/article/details/79028108][https_blog.csdn.net_qq_36666651_article_details_79028108]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20210511/ed4d8648f74b41b5899fd305af67f1ce.png
[https_segmentfault.com_q_1010000008292792]: https://segmentfault.com/q/1010000008292792
[https_blog.csdn.net_lovelichao12_article_details_79272261]: https://blog.csdn.net/lovelichao12/article/details/79272261
[https_blog.csdn.net_qq_36666651_article_details_79028108]: https://blog.csdn.net/qq_36666651/article/details/79028108