Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight respo

简介: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight respo

在axios请求中出现:


image.png

问题描述:

如下图展示,在 请求接口的时候,第一个接口返回200,但是第二个接口却返回0。


image.png

上图是请求日本的域名,然而请求国内的域名是没有问题的。


下面对比一下日本预检请求截图


代码里设置了header 的请求截图 (会报CORS错误)


image.png

image.png

设置header信息的代码注释掉重新请求

image.png

对比之后不难发现,多了一个Authorization


然后看一下nginx里请求头部的配置

image.png

发现是没有允许Authorization的。


由于接口需要在头部header传递Authorization字段:

vue代码:

image.png

执行发送的时候出现以上错误:

image.png

意思是预发请求的时候不通过,不再正式发请求


经过反复的测试,发现,header里面包含自定义字段,浏览器是会先发一次options请求,如果请求通过,则继续发送正式的post请求,而如果不通过则返回以上错误


那这样就只能在服务端配置options的请求返回,代码如下:

 加上  “Authorization”
 response.setHeader("Access-Control-Allow-Headers", "Authorization");

上面代码需要加入允许的头部Authorization,并且判断请求的方法是options的时候,返回ok(200)给客户端,这样才能继续发正式的post请求。


修改之后成功发了post请求。


问题已经解决, 普及预检知识:

预检  

image.png

相关文章
|
5月前
|
JavaScript 前端开发
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘
52 0
remote: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2
remote: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2
3643 0
|
5月前
|
JSON 数据格式
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
|
5月前
|
安全 JavaScript 前端开发
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
|
API
【已解决】No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
274 0
【已解决】No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
|
10月前
|
前端开发 JavaScript
ajax请求的重定向处理--Request header field x-requested-with is not allowed by Access-Control-Allow-Header
ajax请求的重定向处理--Request header field x-requested-with is not allowed by Access-Control-Allow-Header
319 0
|
JavaScript Java 应用服务中间件
Vue 跨域问题 的几种解决办法 (No ‘Access-Control-Allow-Origin‘ header is present on the requested resource)
Vue 跨域问题 的几种解决办法 (No ‘Access-Control-Allow-Origin‘ header is present on the requested resource)
1585 0
Vue 跨域问题 的几种解决办法 (No ‘Access-Control-Allow-Origin‘ header is present on the requested resource)
|
应用服务中间件 API nginx
解决跨域问题 Response to preflight request doesn't pass access control check
解决跨域问题 Response to preflight request doesn't pass access control check
9046 0
|
前端开发 数据可视化 Java
报错:跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
报错:跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
1093 0