四种跨域解决方案
文章目录
- 1.引出跨域
- 1.基本介绍
- 2.具体演示
- 1.启动之前学习过的springboot-furn项目
- 2.浏览器直接访问 [localhost:8081/furns](http://localhost:8081/furns) 可以显示信息
- 3.启动前端项目,取消请求拦截器,这样设置,就会出现跨域
- 4.跨域原因
- 2.跨域问题介绍
- 1.是什么?
- 2.同源策略
- 3.跨域流程
- 1.简单请求和非简单请求
- 1.简单请求
- 2.非简单请求(不满足简单请求的就是非简单请求)
- 2.简单请求-跨域流程
- 3.非简单请求-跨域流程
- 4.非简单请求演示
- 1.这里的添加就是非简单请求
- 2.测试请求,预检请求失败,不会发送真实请求
- 4.跨域解决方案
- 1.Nginx反向代理
- 2.配置服务器允许跨域
- 3.前端启用代理,配置同源
- 5.跨域实操
- 1.全局CORS配置
- 1.后端编写配置类 CorsConfig.java
- 2.成功解决跨域
- 3.查看响应头,后端允许跨域
- 2.添加CORS配置类(只是跟上面的形式不同)
- 1.后端编写配置类 WebMvcConfig.java
- 2.成功解决跨域
- 3.使用Filter方法实现
- 1.后端创建一个过滤器 CorsFilter.java
- 2.启动类添加 @ServletComponentScan 注解,扫描servlet组件
- 3.成功解决跨域
- 4.Vue项目启用代理
- 1.在vue.config.js中添加代理
- 2.修改请求以/api的方式发送请求
- 3.成功解决跨域
- 6.跨域小结
- 1.同源策略限制内容
- 2.请求跨域了,到底发出去没有
- 3.form表单可以跨域提交的,但是Ajax请求不可以跨域请求
- 4.推荐跨域处理方式
1.引出跨域
1.基本介绍
2.具体演示
1.启动之前学习过的springboot-furn项目
2.浏览器直接访问 localhost:8081/furns 可以显示信息
3.启动前端项目,取消请求拦截器,这样设置,就会出现跨域
4.跨域原因
- 当前端项目请求到后端,会返回跨域请求拦截
- 原因是浏览器默认执行同源策略,会禁止读取localhost:8081的资源
2.跨域问题介绍
1.是什么?
2.同源策略
3.跨域流程
1.简单请求和非简单请求
1.简单请求
2.非简单请求(不满足简单请求的就是非简单请求)
2.简单请求-跨域流程
3.非简单请求-跨域流程
4.非简单请求演示
1.这里的添加就是非简单请求
2.测试请求,预检请求失败,不会发送真实请求
4.跨域解决方案
1.Nginx反向代理
2.配置服务器允许跨域
3.前端启用代理,配置同源
5.跨域实操
1.全局CORS配置
1.后端编写配置类 CorsConfig.java
package com.sun.furn.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;/*** Description: 全局跨域配置** @Author sun* @Create 2024/5/15 10:42* @Version 1.0*/
// 全局跨域配置
@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {// 创建跨域配置,添加 CORS 配置信息final CorsConfiguration corsConfiguration = new CorsConfiguration();// 跨域请求默认不包含 cookie,设置为 true 可以包含 cookiecorsConfiguration.setAllowCredentials(true);// 支持哪些来源的请求跨域, 支持corsConfiguration.addAllowedOriginPattern("*");// corsConfiguration.addAllowedOrigin("*");// 支持哪些头信息corsConfiguration.addAllowedHeader("*");// 支持哪些方法跨域corsConfiguration.addAllowedMethod("*");// 添加映射路径final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource= new UrlBasedCorsConfigurationSource();// /** 是一个正则表达式,表示所有请求 the mapping pattern// corsConfiguration 跨域配置urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);// 返回新的 CorsFilter.return new CorsFilter(urlBasedCorsConfigurationSource);}
}
2.成功解决跨域
3.查看响应头,后端允许跨域
2.添加CORS配置类(只是跟上面的形式不同)
1.后端编写配置类 WebMvcConfig.java
package com.sun.furn.config;/*** Description: 全局跨域配置** @Author sun* @Create 2024/5/15 11:49* @Version 1.0*/import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 允许跨域访问的路径.allowedOriginPatterns("*") // 允许跨域访问的源.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许请求方法.maxAge(3600) // 预检间隔时间.allowCredentials(true); // 是否发送cookie}
}
2.成功解决跨域
3.使用Filter方法实现
1.后端创建一个过滤器 CorsFilter.java
package com.sun.furn.filter;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** Description: 使用过滤器解决跨域问题** @Author sun* @Create 2024/5/15 13:25* @Version 1.0*/
@WebFilter(urlPatterns = "*")
public class CorsFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {HttpServletRequest httpRequest = (HttpServletRequest)request;HttpServletResponse httpResponse = (HttpServletResponse) response;httpResponse.setCharacterEncoding("UTF-8");httpResponse.setContentType("application/json; charset=utf-8");httpResponse.setHeader("Access-Control-Allow-Origin", "*");httpResponse.setHeader("Access-Control-Allow-Credentials", "true");httpResponse.setHeader("Access-Control-Allow-Methods", "*");httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");httpResponse.setHeader("Access-Control-Expose-Headers", "*");filterChain.doFilter(httpRequest, httpResponse);}@Overridepublic void destroy() {}
}
2.启动类添加 @ServletComponentScan 注解,扫描servlet组件
3.成功解决跨域
4.Vue项目启用代理
1.在vue.config.js中添加代理
// 跨域配置
module.exports = {devServer: {port: 9999, // 本地服务端口proxy: { //设置代理,必须填'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定target: 'http://localhost:8081', //代理的目标地址changeOrigin: true, //是否设置同源,输入是的pathRewrite: { //路径重写'/api': '' //选择忽略拦截器里面的单词}}}}
}
2.修改请求以/api的方式发送请求
3.成功解决跨域
- 这种方式就相当于是本机对携带/api的请求进行代理,请求携带 Sec-Fetch-Site:same-origin 表示允许跨域
6.跨域小结
1.同源策略限制内容
2.请求跨域了,到底发出去没有
3.form表单可以跨域提交的,但是Ajax请求不可以跨域请求
4.推荐跨域处理方式
- 服务器端解决跨域
- Nginx动静分离 + 反向代理
相关文章:

四种跨域解决方案
文章目录 1.引出跨域1.基本介绍2.具体演示1.启动之前学习过的springboot-furn项目2.浏览器直接访问 [localhost:8081/furns](http://localhost:8081/furns) 可以显示信息3.启动前端项目,取消请求拦截器,这样设置,就会出现跨域4.跨域原因 2.跨…...

移动端投屏到大屏幕的操作详解
如果你懒得折腾电脑、电视或其他大屏设备上的影视软件安装及配置,可以选择直接在手机端上将影片投屏到电脑、电视或其他大屏设备上,这里给大家分享三种手机投屏的方法。 系统自带的投屏功能 不管是安卓、鸿蒙还是苹果操作系统,都自带了无线…...
【环境搭建】3.阿里云ECS服务器 安装Redis
在阿里云的 Alibaba Cloud Linux 3.2104 LTS 64位系统上安装 Redis 可以通过以下步骤完成: 1.更新系统软件包: 首先,更新系统软件包以确保所有软件包都是最新的: sudo yum update -y2.安装编译工具和依赖项: Redis…...
动态语言的开源编译器汇总
对于动态语言而言,我们通常不会使用传统意义上的“编译器”,因为动态语言往往是在运行时解释执行的,或者被转换为中间形式(如字节码),再由虚拟机执行。不过,为了性能考虑,现代动态语…...
Linux防火墙配置001
Linux防火墙主要用于控制网络流量,保护系统安全。在Linux中,有几种不同的防火墙管理工具,其中最常见的是iptables和firewalld。本章主要讲述如何关闭防火墙。 操作系统: CentOS Stream 9 操作步骤: 关闭防火墙&…...

Tomcat概述及部署
目录 一.Tomcat概述 1.介绍 2.使用场景 3.组件构成 4.组件结构 5.请求过程 二.Tomcat部署 1.关闭防火墙 2.下载安装JDK 3.安装启动tomcat 4.部署虚拟主机 4.1.创建 xy101 和 xy102 项目目录和文件 4.2.修改 Tomcat 主配置文件 server.xml 一.Tomcat概述 1.介绍 …...

[Vue3:Vite构建项目]:安装router实现登录页面路由跳转
文章目录 一:前置依赖查看依赖安装vite npm create vitelatest sys-instruction-0607 --template vue-ts安装路由:npm install vue-router4安装elementUI:npm install element-plus --save 二:配置文件:viewsÿ…...

概率论与数理统计,重要知识点——全部公式总结
二、一维随机变量及其分布 五个分布参考另外一篇文章 四、随机变量的数字特征 大数定理以及中心极限定理 六、数理统计...

Spring系列-SpringMvc父子容器启动原理解析
1、Spring整合SpringMVC 特性: 说到Spring整合SpringMVC唯一的体现就是父子容器: 通常我们会设置父容器(Spring)管理Service、Dao层的Bean, 子容器(SpringMVC)管理Controller的Bean .子容器可以访问父容器的Bean, 父容器无法访…...

[ssi-uploader插件]解决如何接收服务器返回数据+修改参数名称
前言 ssi-uploader是一款非常好用的多文件上传插件,源码是开源的,在github上面即可下载: https://github.com/ssbeefeater/ssi-uploader 但是源码有些微小的不足,今天我们解决两点问题: 上传文件完成后,…...

InfiniGate自研网关实现思路七
25.网关Nginx负载模型配置 通过模拟多个HTTP服务配置到 Nginx 做负载均衡,以学习API网关负载的配置和使用 API 网关是用于支撑分布式 RPC 接口协议转换提供 HTTP 调用的一套服务,那么 API 网关系统就需要可横向扩展来满足系统的吞吐量诉求。所以这里需…...

277 基于MATLAB GUI火灾检测系统
基于MATLAB GUI火灾检测系统,可以实现图片和视频的火苗检测。火焰识别的三个特征:1个颜色特征,2个几何特征颜色特征:HSV颜色空间下,对三个通道值进行阈值滤波,几何特征1:长宽比,几何…...

【西瓜书】4.决策树
1 递归返回情况 (1)结点包含样本全为同一类别 (2)属性集为空,没有属性可供划分了 或 有属性,但是在属性上划分的结果都一样 (3)结点为空结点 **结束时判定该结点的类别遵循如下规则&…...

区块链--Ubuntu上搭建以太坊私有链
1、搭建私链所需环境 操作系统:ubuntu16.04,开虚拟机的话要至少4G,否则会影响测试挖矿时的速度 软件: geth客户端 Mist和Ethereum Wallet:Releases ethereum/mist GitHub 2、安装geth客户端 sudo apt-get update …...

菜品信息分页查询——后端SpringBoot
1.分页查询的逻辑: 页面发送ajax请求,将分页查询参数(page,pageSize, name)提交到服务端,获取分页数据; 页面发送请求,请求服务端进行图片下载,用于页面图片展示。 开发菜品信息分页查询功能&a…...

利用GPT和PlantUML快速生成UML图用于设计
在软件开发中,设计阶段可是关键的一步。UML(统一建模语言)图能帮我们更清晰地理解和规划系统结构,但手动画UML图有时会很费时费力。好消息是,通过结合使用ChatGPT和PlantUML,我们可以高效地生成UML图&#…...

web-上传项目文件夹到Git远程仓库
Git初识 概念:一个免费开源,分布式的代码版本控制系统,帮助开发团队维护代码 作用:记录代码内容,切换代码版本,多人开发时高效合并代码内容 检验成功 打开bash终端(git专用)命令…...

使用OpenPCDet训练与测试Transformer模型:如何加载自己的数据集
引言 Transformer架构因其强大的序列处理能力和长距离依赖捕捉能力,在自然语言处理领域取得了巨大成功。近年来,这一架构也被引入3D物体检测领域,如Voxel Transformer等,显著提升了模型在复杂场景下的检测性能。OpenPCDet整合了多…...
四舍五入问题
单纯输出四舍五入可以用 printf("%.nf",num); 但是这个方法有时候会出错 代表输出n位四舍五入小数 而将数四舍五入赋值给变量可以用round()函数 a round(num); 表示将num四舍五入赋值给a 但是这么些只能转换位四舍五入的整数 可以改…...

零基础入门学用Arduino 第一部分(三)
重要的内容写在前面: 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后,整体感觉是很好的,如果有条件的可以先学习一些相关课程,学起来会更加轻松,相关课程有数字电路…...

手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...

视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...

算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...