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

相关文章
|
2月前
|
前端开发 Java
前后端分离的跨域问题解决:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
本文介绍了解决前后端分离项目中跨域问题的方法,包括添加`CorsConfig`配置类和重写`WebMvcConfigurer`接口的`addCorsMappings`方法,允许前端请求访问后端资源,并提供了具体的代码示例。
前后端分离的跨域问题解决:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
|
5月前
|
前端开发 对象存储 数据安全/隐私保护
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
629 2
|
6月前
|
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 ‘
142 0
|
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
388 0
【已解决】No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
|
11月前
|
安全 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.
|
11月前
|
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……
|
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)
1969 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
11528 1
|
前端开发 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
473 0
|
Web App开发 存储 安全
新版本Chrome同源策略、跨域问题处理No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
新版本Chrome同源策略、跨域问题处理No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
788 0