Request header field countent-type is not allowed by Access-Control-Allow-Header in preflight resp

解决

修改服务端 设置响应头部分的代码，完美解决。

详细

基本需求：
发送一个POST请求，请求参数是一个JSON对象，通过请求体request body传递。

以下使用了axios(也可以使用jQuery，fetch等)。

var someParams = {
     ...};	// 对象格式
axios({
     
	meethod: "POST",
	url: "xxx",
	data: someParams,
	headers: {
     
		"Content-Type": "application/json",
	},
})
.then(resp => {
     
  // resolve response...
})

然而，前端项目地址：http://localhost:3000…
后端web接口地址：http://x.x.x.x:8080…

一调用就报错：

Request header field countent-type is not allowed by Access-Control-Allow-Header in preflight response

F12 - Network - 点击刚才的请求
分析请求头(request Header)和响应头(Response Header)中的HTTP头信息。

首先，请求的发送方 和 服务提供方 不同源。
那么要发送两次请求：
第一次：发送OPTIONS请求(不带请求体的数据)，本次只是为了带着请求头等一些信息，去服务器那边试试：
按照服务器那边设定的CORS规则，我这个请求能不能被响应。

如果能，就会发第二次请求，带着数据去请求，拿回数据做处理即可。万事皆妙。
如果没有，就停下吧。不会有第二次请求，页拿不到数据了。

本次报错，原因在于：服务端 传回响应的逻辑中 设置过严

修改服务端代码中，关于Access-Control-Alow-Headers响应头的设置(以下以Java Servlet标准为例)：

HttpServletResponse resp;
resp.setHeader("Access-Control-Alow-Headers", "Content-Type");

可以配置单个方法，也可以在项目整体的过滤器中设置。
局部 OR 全局，由个人需求决定。

Links

• MDN Access-Control-Allow-Headers
• MDN Preflight Request 预检测请求