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

相关文章
|
Oracle 关系型数据库 数据库
0丢失之谜:解决Oracle中0开头小数被截断的问题
0丢失之谜:解决Oracle中0开头小数被截断的问题
2059 0
|
存储
ASCII码可以表示汉字吗?
ASCII码可以表示汉字吗?
5689 0
|
缓存 JSON 安全
Http自定义Header导致的跨域问题
在Web开发中,正确处理跨域问题是确保应用安全和性能的重要环节。通过在服务器端设置适当的CORS头信息,处理预检请求,并遵循最佳实践,可以有效解决自定义Header导致的跨域问题,提高应用的安全性和用户体验。理解并掌握这些技巧,对于构建高效、可靠的Web应用至关重要。
1270 11
|
关系型数据库 数据库 PostgreSQL
PostgreSQL内核扩展之 - ElasticSearch同步插件
背景介绍 Elasticsearch 是开源搜索平台的新成员,实时数据分析的神器,发展迅猛,基于 Lucene、RESTful、分布式、面向云计算设计、实时搜索、全文搜索、稳定、高可靠、可扩展、安装+使用方便。 PostgreSQL 是起源自伯克利大学的开源数据库,历史悠久,内核扩展性极强,用户
27488 1
|
关系型数据库 MySQL 数据处理
Mysql关于同时使用Group by和Order by问题
总的来说,`GROUP BY`和 `ORDER BY`的合理使用和优化,可以在满足数据处理需求的同时,保证查询的性能。在实际应用中,应根据数据的特性和查询需求,合理设计索引和查询结构,以实现高效的数据处理。
1884 1
|
SQL 存储 缓存
什么?部署ClickHouse的服务器CPU利用率100%了?
什么?部署ClickHouse的服务器CPU利用率100%了?
|
开发框架 前端开发 JavaScript
利用Spire.Pdf实现PDF添加印章的操作
利用Spire.Pdf实现PDF添加印章的操作
|
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……
|
网络协议 应用服务中间件 Linux
centos7 Nginx Log日志统计分析 常用命令
centos7 Nginx Log日志统计分析 常用命令
825 2

热门文章

最新文章