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

一个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。

这是找一篇文章：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

注：使用上述方法后，需要把手动设置的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