当前位置: 首页 > news >正文

四种跨域解决方案

文章目录

    • 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.基本介绍

image-20240515085751169

2.具体演示
1.启动之前学习过的springboot-furn项目

image-20240515090423854

2.浏览器直接访问 localhost:8081/furns 可以显示信息

image-20240515090504976

3.启动前端项目,取消请求拦截器,这样设置,就会出现跨域

image-20240515092219659

image-20240515092248401

4.跨域原因
  • 当前端项目请求到后端,会返回跨域请求拦截
  • 原因是浏览器默认执行同源策略,会禁止读取localhost:8081的资源

2.跨域问题介绍

1.是什么?

image-20240515093221398

2.同源策略

image-20240515093525190

3.跨域流程

1.简单请求和非简单请求
1.简单请求

image-20240515094205791

2.非简单请求(不满足简单请求的就是非简单请求)
2.简单请求-跨域流程

image-20240515094529863

3.非简单请求-跨域流程

image-20240515094802953

4.非简单请求演示
1.这里的添加就是非简单请求

image-20240515095045529

2.测试请求,预检请求失败,不会发送真实请求

image-20240515095205895

4.跨域解决方案

1.Nginx反向代理

image-20240515095549092

image-20240515095608460

2.配置服务器允许跨域

image-20240515100001936

image-20240515100018589

image-20240515095916927

3.前端启用代理,配置同源

image-20240515102905203

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.成功解决跨域

image-20240515114309118

3.查看响应头,后端允许跨域

image-20240515114601343

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.成功解决跨域

image-20240515115413519

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组件

image-20240515132812176

3.成功解决跨域

image-20240515133029850

4.Vue项目启用代理
1.在vue.config.js中添加代理
// 跨域配置
module.exports = {devServer: {port: 9999,  // 本地服务端口proxy: { //设置代理,必须填'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定target: 'http://localhost:8081', //代理的目标地址changeOrigin: true, //是否设置同源,输入是的pathRewrite: { //路径重写'/api': '' //选择忽略拦截器里面的单词}}}}
}
2.修改请求以/api的方式发送请求

image-20240515134747244

3.成功解决跨域
  • 这种方式就相当于是本机对携带/api的请求进行代理,请求携带 Sec-Fetch-Site:same-origin 表示允许跨域

image-20240515134846979

6.跨域小结

1.同源策略限制内容

image-20240515135627856

2.请求跨域了,到底发出去没有

image-20240515135817054

3.form表单可以跨域提交的,但是Ajax请求不可以跨域请求

image-20240515135946250

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&#xff…...

概率论与数理统计,重要知识点——全部公式总结

二、一维随机变量及其分布 五个分布参考另外一篇文章 四、随机变量的数字特征 大数定理以及中心极限定理 六、数理统计...

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 但是源码有些微小的不足,今天我们解决两点问题: 上传文件完成后&#xff0c…...

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教程为基础制作的学习笔记。个人把这个教程学完之后,整体感觉是很好的,如果有条件的可以先学习一些相关课程,学起来会更加轻松,相关课程有数字电路…...

MMaDA: Multimodal Large Diffusion Language Models

CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

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…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

uniapp中使用aixos 报错

问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持:CMake支持多种操作系统和编译器,使用同一份构建配置可以在不同的环境中使用 简化配置:通过CMakeLists.txt文件,用户可以定义项目结构、依赖项、编译选项等,无需手动编写复杂的构建脚本…...