通过设置响应头解决跨域问题

网上很多文章都是告诉你直接Nginx添加这几个响应头信息就能解决跨域，当然大部分情况是能解决，但是我相信还是有很多情况，明明配置上了，也同样会报跨域问题。
这大概率是因为，服务端没有正确处理预检请求也就是OPTIONS请求
CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）;浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
跨域主要涉及4个响应头：

  • Access-Control-Allow-Origin 用于设置允许跨域请求源地址 （预检请求和正式请求在跨域时候都会验证）
  • Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段 （只在预检请求验证）
  • Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词 （只在预检请求验证）
  • Access-Control-Allow-Credentials 是否允许跨域使用cookies，如果要跨域使用cookies，可以添加上此请求响应头，值设为true（设置或者不设置，都不会影响请求发送，只会影响在跨域时候是否要携带cookies，但是如果设置，预检请求和正式请求都需要设置）。不过不建议跨域使用（项目中用到过，不过不稳定，有些浏览器带不过去），除非必要，因为有很多方案可以代替。

什么是预检请求？：当发生跨域条件时候，览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。如下图
在这里插入图片描述

这个请求就是**OPTIONS请求，因此服务器想要支持跨域请求，那么就需要对OPTIONS**请求做支持。
那么使用nginx就可以完全支持跨域，

nginx解决跨域

使用nginx进行设置设置响应头与处理OPTIONS请求
方案1 *：通配符，全部允许，存在安全隐患(不推荐)。
一旦启用本方法，表示任何域名皆可直接跨域请求：

  1     server {2         ...3         location / {4             # 允许 所有头部 所有域 所有方法5             add_header 'Access-Control-Allow-Origin' '*';6             add_header 'Access-Control-Allow-Headers' '*';7             add_header 'Access-Control-Allow-Methods' '*';8             # OPTIONS 直接返回204h9             if ($request_method = 'OPTIONS') {10                 return 204;11             }12         }13         ...14     }

方案2：多域名配置(推荐)
配置多个域名在map中 只有配置过的允许跨域：

  1  map $http_origin $corsHost {2         default 0;3         "~https://zzzmh.cn" https://zzzmh.cn;4         "~https://chrome.zzzmh.cn" https://chrome.zzzmh.cn;5         "~https://bz.zzzmh.cn" https://bz.zzzmh.cn;6     }7     server {8         ...9         location / {10             # 允许 所有头部 所有$corsHost域 所有方法11             add_header 'Access-Control-Allow-Origin' $corsHost;12             add_header 'Access-Control-Allow-Headers' '*';13             add_header 'Access-Control-Allow-Methods' '*';14             # OPTIONS 直接返回20415             if ($request_method = 'OPTIONS') {16                 return 204;17             }18         }19         ...20     }

通过nginx配置，可以轻松解决跨域，OPTIONS预请求也交给了nginx完成，后端服务器则不用关心这个问题

后端解决

通过我们的后端服务器进行设置设置响应头与处理OPTIONS请求
_那么问题来了，后端要单独为预检请求做处理，那我们开发难道还需要单独写接口处理吗？。也没必要担心，因为springMvc已经为我们做了处理
_具体实现如下

private class PreFlightHandler implements HttpRequestHandler, CorsConfigurationSource {@Nullableprivate final CorsConfiguration config;public PreFlightHandler(@Nullable CorsConfiguration config) {this.config = config;}@Overridepublic void handleRequest(HttpServletRequest request, HttpServletResponse response) throws IOException {corsProcessor.processRequest(this.config, request, response);}@Override@Nullablepublic CorsConfiguration getCorsConfiguration(HttpServletRequest request) {return this.config;}}

public class DefaultCorsProcessor implements CorsProcessor {private static final Log logger = LogFactory.getLog(DefaultCorsProcessor.class);@Override@SuppressWarnings("resource")public boolean processRequest(@Nullable CorsConfiguration config, HttpServletRequest request,HttpServletResponse response) throws IOException {Collection<String> varyHeaders = response.getHeaders(HttpHeaders.VARY);if (!varyHeaders.contains(HttpHeaders.ORIGIN)) {response.addHeader(HttpHeaders.VARY, HttpHeaders.ORIGIN);}if (!varyHeaders.contains(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD)) {response.addHeader(HttpHeaders.VARY, HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD);}if (!varyHeaders.contains(HttpHeaders.ACCESS_CONTROL_REQUEST_HEADERS)) {response.addHeader(HttpHeaders.VARY, HttpHeaders.ACCESS_CONTROL_REQUEST_HEADERS);}if (!CorsUtils.isCorsRequest(request)) {return true;}if (response.getHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN) != null) {logger.trace("Skip: response already contains \"Access-Control-Allow-Origin\"");return true;}boolean preFlightRequest = CorsUtils.isPreFlightRequest(request);if (config == null) {if (preFlightRequest) {rejectRequest(new ServletServerHttpResponse(response));return false;}else {return true;}}return handleInternal(new ServletServerHttpRequest(request), new ServletServerHttpResponse(response), config, preFlightRequest);}

protected boolean handleInternal(ServerHttpRequest request, ServerHttpResponse response,CorsConfiguration config, boolean preFlightRequest) throws IOException {String requestOrigin = request.getHeaders().getOrigin();String allowOrigin = checkOrigin(config, requestOrigin);HttpHeaders responseHeaders = response.getHeaders();if (allowOrigin == null) {logger.debug("Reject: '" + requestOrigin + "' origin is not allowed");rejectRequest(response);return false;}HttpMethod requestMethod = getMethodToUse(request, preFlightRequest);List<HttpMethod> allowMethods = checkMethods(config, requestMethod);if (allowMethods == null) {logger.debug("Reject: HTTP '" + requestMethod + "' is not allowed");rejectRequest(response);return false;}List<String> requestHeaders = getHeadersToUse(request, preFlightRequest);List<String> allowHeaders = checkHeaders(config, requestHeaders);if (preFlightRequest && allowHeaders == null) {logger.debug("Reject: headers '" + requestHeaders + "' are not allowed");rejectRequest(response);return false;}responseHeaders.setAccessControlAllowOrigin(allowOrigin);if (preFlightRequest) {responseHeaders.setAccessControlAllowMethods(allowMethods);}if (preFlightRequest && !allowHeaders.isEmpty()) {responseHeaders.setAccessControlAllowHeaders(allowHeaders);}if (!CollectionUtils.isEmpty(config.getExposedHeaders())) {responseHeaders.setAccessControlExposeHeaders(config.getExposedHeaders());}if (Boolean.TRUE.equals(config.getAllowCredentials())) {responseHeaders.setAccessControlAllowCredentials(true);}if (preFlightRequest && config.getMaxAge() != null) {responseHeaders.setAccessControlMaxAge(config.getMaxAge());}response.flush();return true;}

springMvc会根据跨域配置处理跨域请求。

配置跨域

   @Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH");}

可以用通过配置类进行配置上面的CorsConfiguration
不过新版的springMvc已经禁止同时设置
allowCredentials为true
allowCredentials为false
如果有这个需求，需要自行编写拦截器进行处理。

/ 跨域拦截器
public class CrosInterceptor implements HandlerInterceptor {// 访问前进行拦截@Overridepublic boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) {// 设置响应头httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");httpServletResponse.setHeader("Access-Control-Allow-Headers", "*");httpServletResponse.setHeader("Access-Control-Allow-Methods", "*");httpServletResponse.setHeader("Access-Control-Max-Age", "3600");httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");return true;}
}

配置拦截器

   @Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(authenticationInterceptor()).addPathPatterns("/**");    // 拦截所有请求，通过判断是否有 @LoginRequired 注解 决定是否需要登录registry.addInterceptor(reqIdHandler()).addPathPatterns("/**");    //验证corpId是否一致registry.addInterceptor(new CrosInterceptor()).addPathPatterns("/**");}

拦截器跳过OPTIONS请求

但是需要注意的是要防止服务器的拦截器拦截的OPTIONS请求，导致预检失败，报跨域错误
例如这样就会导致跨域报错。

@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {String token = request.getHeader(Constants.TOKEN);if (StrUtil.isEmpty(token)) {throw new TokenException("Token为空");}}

应该为拦截器加判断

@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {if("OPTIONS".equals(request.getMethod())){return true;}String token = request.getHeader(Constants.TOKEN);if (StrUtil.isEmpty(token)) {throw new TokenException("Token为空");}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/190839.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于SpringBoot+Vue的高校心理教育管理系统

基于SpringBoot+Vue的高校心理教育管理系统

基于SpringBootVue的高校心理教育管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 测试列表 测试结果 用户界面 管理员界面 摘要 本文设计并实现了一款…
阅读更多...
Ubuntu18.04 安装docker教程

Ubuntu18.04 安装docker教程

Ubuntu18.04 安装docker教程 1、前言 Docker Engine-Community 支持以下的 Ubuntu 版本&#xff1a; Xenial 16.04 (LTS)Bionic 18.04 (LTS)Cosmic 18.10Disco 19.04 Docker Engine-Community 支持以下CPU架构&#xff1a; x86_64&#xff08;或 amd64&#xff09;armhfarm…
阅读更多...
开源知识库软件xwiki在Windows下的安装

开源知识库软件xwiki在Windows下的安装

文章目录 开源知识库软件-xwiki在windows上的部署0、参考文档1、前置环境准备1.1、Windows版本及系统配置1.2、JDK11安装1.3、Tomcat9安装1.4、MySQL5.7数据库的安装 2、xwiki安装3、配置3.1、修改配置支持对文档内容进行搜索 4、问题解决4.1、附件无法上传问题4.1、附件无法下…
阅读更多...
Apache Airflow (三) ：Airflow WebUI操作介绍

Apache Airflow (三) ：Airflow WebUI操作介绍

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…
阅读更多...
gradle 使用记录

gradle 使用记录

gradle 使用记录 下载与设置android studio 配置 参考 IDEA如何配置 Gradle 及 Gradle 安装过程&#xff08;详细版&#xff09; 设置Gradle国内镜像并配置本地仓库地址 下载与设置 腾讯镜像下载 比如gradle-8.4-bin.zip 新建环境变量 GRADLE_HOME 为 D:\java\gradle &#…
阅读更多...
MySQL join原理及优化

MySQL join原理及优化

MySQL的JOIN原理是基于索引和算法的。在执行JOIN查询时&#xff0c;MySQL会根据连接字段上的索引来查找匹配的记录。 这种算法在链接查询的时候&#xff0c;驱动表会根据关联字段的索引进行查找&#xff0c;当在索引上找到了符合的值&#xff0c;再回表进行查询&#xff0c;也就…
阅读更多...
设计模式—结构型模式之代理模式

设计模式—结构型模式之代理模式

设计模式—结构型模式之代理模式 代理模式(Proxy Pattern) ,给某一个对象提供一个代理&#xff0c;并由代理对象控制对原对象的引用,对象结构型模式。 静态代理 比如我们有一个直播平台&#xff0c;提供了直播功能&#xff0c;但是如果不进行美颜&#xff0c;可能就比较冷清…
阅读更多...
Django——orm模块创建表关系

Django——orm模块创建表关系

django orm中如何创建表关系 1. 表关系分析 表与表之间的关系: 一对多 多对多 一对一 没有关系 判断表关系的方法: 换位思考用4张表举例: 图书表 出版社表 作者表 作者详情表图书和出版社是一对多的关系 外键字段建在多的那一方图书和作者是多对多的关系 需要创建第三张表来…
阅读更多...
高防IP是什么？有什么优势？

高防IP是什么？有什么优势？

一.高防IP的概念 高防IP是指高防机房所提供的IP段&#xff0c;一种付费增值服务&#xff0c;主要是针对网络中的DDoS攻击进行保护。用户可以通过配置高防IP&#xff0c;把域名解析到高防IP上&#xff0c;引流攻击流量&#xff0c;确保源站的稳定可靠。 二.高防IP的原理 高防I…
阅读更多...
【编程实践】黑框框里的打字小游戏，但是汇编语言

【编程实践】黑框框里的打字小游戏，但是汇编语言

2023-10-10 更新 续&#xff1a;将基于Nasm汇编的打字小游戏&#xff0c;移植到DOSBox 开始&#xff1a; 在学习王爽的《汇编语言》的过程中&#xff0c;我就真切地体会到编程实践对于理解的帮助。起初我没有安装书中的实验环境&#xff0c;看到100页左右就开始感觉无趣、吃力…
阅读更多...
Spring Boot(一)

Spring Boot(一)

Spring Boot是一个开源的Java框架&#xff0c;旨在简化基于Java的应用程序的开发和部署过程。它提供了许多开箱即用的功能和工具&#xff0c;使开发者能够快速构建独立、可执行的、生产级别的应用程序。 以下是Spring Boot的一些主要特点和优势&#xff1a; 简化的配置&#x…
阅读更多...
【学习笔记】Understanding LSTM Networks

【学习笔记】Understanding LSTM Networks

Understanding LSTM Networks 前言Recurrent Neural NetworksThe Problem of Long-Term DependenciesLSTM Networks The Core Idea Behind LSTMsStep-by-Step LSTM Walk ThroughForget Gate LayerInput Gate LayerOutput Gate Layer Variants on Long Short Term MemoryConclus…
阅读更多...
pychon/PIL/opencv/json学习过程中遇到的问题

pychon/PIL/opencv/json学习过程中遇到的问题

1. 使用PIL.Image读取图片 注意&#xff1a;pytorch中对图像预处理是transforms的输入必须是PIL格式的文件&#xff0c;使用cv2读取的图片就按照第二条的代码处理&#xff08;3通道合并、归一化处理&#xff09; from PIL import Image img Image.open("test1.jpg"…
阅读更多...
◢Django 自写分页与使用

◢Django 自写分页与使用

目录 1、设置分页样式,并展示到浏览器 2、模拟页码 3、生成分页 4、数据显示 5、上一页下一页 6、数据库的数据分页 7、封装分页 8、使用封装好的分页 建立好app后&#xff0c;设置路径path(in2/,views.in2)&#xff0c;视图def in2(request): &#xff0c;HTML: in2.html…
阅读更多...
PCL安装与使用

PCL安装与使用

1 apt安装 ubuntu20.04及以上版本下可以直接通过apt方式安装pcl编译好的二进制文件,二进制安装的版本为1.10。 sudo apt update sudo apt install libpcl-dev 2 源码安装 在pcl的github上下载对应的版本进行安装&#xff1a; https://github.com/PointCloudLibrary/pcl/rel…
阅读更多...
win 命令替代鼠标的操作

win 命令替代鼠标的操作

操作方式都是在 winR 输入框输入或者终端输入 1、快速打开 控制面板 运行control 2、快速打开 电源选项 运行powercfg.cpl 3、快速打开 网络连接 运行ncpa.cpl 4、快速打开 程序和功能 运行appwiz.cpl 5、快速打开 Windows Defender防火墙 运行Firewall.cpl 6、快速打开 鼠标 …
阅读更多...
EXCEL——计算数据分散程度的相关函数

EXCEL——计算数据分散程度的相关函数

一、PERCENTIL函数 1.函数介绍 通常用来返回数据集给定百分点上的值。 2.函数解读 函数公式&#xff1a; PERCENTILE(数据, 百分点) 参数释义&#xff1a; 数据&#xff08;必填&#xff09;&#xff1a;待处理的数组或数据区域。 百分点&#xff08;必填&#xff09;&…
阅读更多...
Python 如何实现 Command（命令）模式？什么是 Command（命令）设计模式？

Python 如何实现 Command（命令）模式？什么是 Command（命令）设计模式？

什么是命令设计模式&#xff1f; 命令模式&#xff08;Command Design Pattern&#xff09;是一种行为设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而允许参数化客户端对象&#xff0c;排队请求&#xff0c;或者对请求进行操作。命令模式支持撤销操作&#xff0…
阅读更多...
SpringCache(Redis)

SpringCache(Redis)

一、springcache是什么 springcache是spring的缓存框架&#xff0c;利用了AOP&#xff0c;实现了基于注解的缓存功能&#xff0c;并且进行了合理的抽象&#xff0c;业务代码不用关心底层是使用了什么缓存框架&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能了…
阅读更多...
Clickhouse学习笔记（11）—— 数据一致性

Clickhouse学习笔记（11）—— 数据一致性

使用合并树引擎时&#xff0c;无论是ReplacingMergeTree还是SummingMergeTree&#xff0c;都只能保证数据的最终一致性&#xff0c;因为数据的去重、聚合等操作会在数据合并的期间进行&#xff0c;而合并会在后台以一个不确定的时间进行&#xff0c;因此无法预先计划&#xff1…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023