CORS预检请求配置流程图 srpingboot和uniapp

首先要会判断预检请求 还是简单请求
简单请求
简单请求
预检请求
在这里插入图片描述

简单请求条件
方法限制: GET, HEAD, POST
Content-Type 限制
Headers 限制
CORS 请求
是否满足简单请求条件?
简单请求
预检请求
GET
HEAD
POST with simple Content-Type
PUT, DELETE, PATCH等
POST with complex Content-Type
自定义头部
application/x-www-form-urlencoded
multipart/form-data
text/plain
Accept
Accept-Language
Content-Language
Content-Type 仅限于简单值

解释:

  1. 简单请求:

    • 方法:GET, HEAD, POST
    • 如果是 POST,Content-Type 仅限于:
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain
    • 只包含以下头部:
      • Accept
      • Accept-Language
      • Content-Language
      • Content-Type(仅限于上述值)
  2. 预检请求(非简单请求):

    • 使用其他 HTTP 方法(如 PUT, DELETE, PATCH 等)
    • POST 请求使用其他 Content-Type(如 application/json)
    • 包含自定义头部

当然可以。让我们通过流程图和实际例子来解释简单请求和预检请求(非简单请求)的区别。

首先,我们来看两种请求的流程图:

浏览器 服务器 简单请求 发送请求(GET, POST等) 返回响应(带CORS头) 预检请求 发送OPTIONS预检请求 返回预检响应(带CORS头) 发送实际请求 返回响应 中止请求 alt [预检成功] [预检失败] 浏览器 服务器

这个 CORS 配置允许比较宽松的跨域访问。让我们详细分析一下这个配置对应的前端请求类型:

  1. 创建 StsRequest.java 类:
package com.example.demo;public class StsRequest {private int id;public int getId() {return id;}public void setId(int id) {this.id = id;}
}
  1. 创建 StsResponse.java 类:
package com.example.demo;public class StsResponse {private String message;public StsResponse(String message) {this.message = message;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}
}
  1. 修改主应用类 DemoApplication.java:
package com.example.demo;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.bind.annotation.*;@SpringBootApplication
@RestController
@RequestMapping("/api/gateway/jzgj/app/oss")
public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedOrigin("http://localhost:5173"); // 明确指定允许的源config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}@PostMapping("/getSts")public StsResponse getSts(@RequestBody StsRequest request, @RequestHeader("token") String token) {System.out.println("Received request with id: " + request.getId());System.out.println("Token: " + token);return new StsResponse("STS response for id: " + request.getId());}
}
夜店入口
安保模式选择
普通模式
严格模式
不允许的模式
允许所有人进入
不允许携带身份证件
只允许特定人进入
必须携带身份证件
允许所有人进入
允许携带身份证件
config.addAllowedOrigin('*')
config.setAllowCredentials(false)
config.addAllowedOrigin('http://localhost:5173')
config.setAllowCredentials(true)
config.addAllowedOrigin('*')
config.setAllowCredentials(true)
安全但开放
安全且可控
不安全! 不被允许

第二部分: UniApp 前端

<template><view class="content"><button @click="getSts">获取 STS</button><text v-if="response">响应: {{ response }}</text></view>
</template><script>
export default {data() {return {response: ''}},methods: {getSts() {uni.request({url: 'http://localhost:9999/api/gateway/jzgj/app/oss/getSts',method: 'POST',header: {'Content-Type': 'application/json','token': '806e4f157ab9442dbfa8b33e50a40e26'},data: {id: 1},success: (res) => {this.response = JSON.stringify(res.data);},fail: (err) => {console.error('错误:', err);this.response = '发生错误';}});}}
}
</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}button {margin-top: 20px;
}text {margin-top: 20px;
}
</style>
浏览器(http://localhost:5173) 服务器(http://192.168.110.233:9999) 发送 OPTIONS 预检请求 CorsFilter 处理预检请求 检查 CORS 政策 CorsConfiguration 定义CORS策略 返回预检响应(带CORS头) 发送实际请求 @PostMapping("/getSts") 处理实际请求 返回响应 中止请求 alt [预检成功] [预检失败] 浏览器(http://localhost:5173) 服务器(http://192.168.110.233:9999)
浏览器 (http://localhost:5173) CorsFilter CorsConfiguration 控制器 发送 OPTIONS 预检请求 获取CORS配置 setAllowCredentials(true) addAllowedOrigin("http://localhost:5173") addAllowedHeader("*") addAllowedMethod("*") 返回CORS配置 应用CORS配置 返回预检响应(带CORS头) 发送实际请求 (POST /getSts) @PostMapping("/getSts") 处理请求 返回响应 中止请求 alt [预检成功] [预检失败] 浏览器 (http://localhost:5173) CorsFilter CorsConfiguration 控制器
应用程序 @Bean方法 UrlBasedCorsConfigurationSource CorsConfiguration CorsFilter 调用corsFilter()方法 创建 UrlBasedCorsConfigurationSource 创建 CorsConfiguration setAllowCredentials(true) 允许发送凭证 addAllowedOrigin("http://localhost:5173") 允许特定源 addAllowedHeader("*") 允许所有头部 addAllowedMethod("*") 允许所有HTTP方法 registerCorsConfiguration("/**", config) 对所有路径应用配置 创建 CorsFilter(source) 返回 CorsFilter 应用程序 @Bean方法 UrlBasedCorsConfigurationSource CorsConfiguration CorsFilter

现在让我们详细解释每一行代码:

  1. @Bean public CorsFilter corsFilter() {

    • 这是一个 Spring Bean 定义方法,它会在应用启动时被调用,创建一个 CorsFilter 实例。
  2. UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

    • 创建一个 URL 基础的 CORS 配置源,用于管理不同 URL 路径的 CORS 配置。
  3. CorsConfiguration config = new CorsConfiguration();

    • 创建一个新的 CORS 配置对象,用于设置具体的 CORS 规则。
  4. config.setAllowCredentials(true);

    • 允许跨域请求携带凭证信息(如 cookies)。这对于需要身份验证的请求很重要。
  5. config.addAllowedOrigin("http://localhost:5173");

    • 明确指定允许的源。这里只允许来自 http://localhost:5173 的请求,提高了安全性。
  6. config.addAllowedHeader("*");

    • 允许所有的请求头。"*" 表示任何头部都被允许。在生产环境中,您可能想要限制具体的头部。
  7. config.addAllowedMethod("*");

    • 允许所有的 HTTP 方法(GET, POST, PUT, DELETE 等)。同样,"*" 表示所有方法都允许。
  8. source.registerCorsConfiguration("/**", config);

    • 将 CORS 配置注册到配置源上。"/**" 表示这个配置适用于所有的路径。
  9. return new CorsFilter(source);

    • 创建并返回一个新的 CorsFilter 实例,使用配置好的源。

这个配置的主要目的是:

  • 允许来自 http://localhost:5173 的跨域请求
  • 允许这些请求携带凭证信息
  • 允许所有的请求头和 HTTP 方法
  • 将这个配置应用到所有的 API 路径

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

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

相关文章

关于测试用例的写法

最近公司有个新项目&#xff0c;需要写测试用例&#xff0c;表单项有点多&#xff0c;一个表单都有40个字段左右&#xff0c;若写用例得400条左右&#xff0c;大部分都是重复的项&#xff0c;在此写个小程序&#xff0c;批量生成测试用例 需要注意的是本程序只使用于表单内容 模…

基于ssm+vue的购物商场的设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…

JavaScript 的 axios 实现文件下载功能

用 JavaScript 的 axios 实现文件下载功能&#xff0c;咱们要分几个步骤来搞定它&#xff01;最主要的部分是处理 二进制数据&#xff0c;可以生成一个进度检测&#xff0c;然后把它保存为文件。 文件名的获取二进制数据获取创建下载链接 const axios require(axios);const g…

【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b

【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b CogVideoX-2b 模型介绍发布时间模型测试生成的demo视频生成视频限制 运行环境安装运行模型下载开源协议参考 CogVideoX-2b 模型介绍 CogVideoX是 清影 同源的开源版本视频生成模型。 基础信息&#xff1a; 发布时间 2…

【【自动驾驶】车辆运动学模型】

【自动驾驶】车辆运动学模型 1. 引言2. 以车辆重心为中心的单车模型2.1 模型介绍2.2 滑移角 β \beta β 的推导2.2 航向角 ψ \psi ψ推导过程&#xff1a;2.3 滑移角 β \beta β2.3 Python代码实现2.4 C代码实现 3. 前轮驱动的单车模型3.1 模型介绍3.3 Python代码实现3.4 …

【功能安全】 独立于环境的安全要素SEooC

目录 01 SEooC定义 02 SEooC开发步骤 03 SEooC开发示例 04 SEooC问答 01 SEooC定义 缩写: SEooC:Safety Element out of Context独立于环境的安全要素 SEooC出处:GB/T34590.10—2022,第9章节 SEooC与相关项什么关系? SEooC可以是系统、系统组合、子系统、软件组件、…

【软件设计】常用设计模式--代理模式

文章目录 代理模式&#xff08;Proxy Pattern&#xff09;1. 概念2. 模式结构3. UML 类图4.实现方式C# 示例步骤1&#xff1a;定义主题接口步骤2&#xff1a;实现真实主题步骤3&#xff1a;实现代理类步骤4&#xff1a;客户端使用代理模式输出结果&#xff1a; Java 示例步骤1&…

EXCELL中如何两条线画入一张图中,标记坐标轴标题?

1&#xff0c;打开excel&#xff0c;左击选中两列&#xff0c; 2&#xff0c;菜单栏>“插入”>”二维折线图”选中一个 3&#xff0c;选中出现的两条线中的一条右击>最下一行&#xff0c;“设置数据系列格式” 4&#xff0c;右测“系列选项中”>点击“次坐标轴” 5…

龙蟠科技业绩压力显著:资产负债率持续攀升,产能利用率也不乐观

《港湾商业观察》施子夫 黄懿 去年十月至今两度递表后&#xff0c;10月17日&#xff0c;江苏龙蟠科技股份有限公司(以下简称&#xff0c;龙蟠科技&#xff1b;603906.SH&#xff0c;02465.HK)通过港交所主板上市聆讯。 很快&#xff0c;龙蟠科技发布公告称&#xff0c;公司全…

低代码开发详解与行业应用指南

低代码开发简化软件开发&#xff0c;助力企业数字化转型。ZohoCreator应用于零售、制造、教育、IT、医疗、房地产等行业&#xff0c;提升效率、降低成本。灵活定价&#xff0c;支持免费试用&#xff0c;助力企业快速实现数字化。 一、低代码开发是什么&#xff1f; 低代码开发…

青少年编程能力等级测评CPA C++五级试卷(1)

青少年编程能力等级测评CPA C五级试卷&#xff08;1&#xff09; 一、单项选择题&#xff08;共15题&#xff0c;每题3分&#xff0c;共45分&#xff09; CP5_1_1.下列有关类的重用意义的叙述中&#xff0c;不正确的是&#xff08; &#xff09;。 A&#x…

栈(数据结构)——C语言

1 概念与结构 栈&#xff1a;⼀种特殊的线性表&#xff0c;其只允许在固定的⼀端进⾏插⼊和删除元素操作。进⾏数据插⼊和删除操作 的⼀端称为栈顶&#xff0c;另⼀端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#…

如何动态改变本地的ip

在当今数字化时代&#xff0c;网络连接已成为我们日常生活和工作中不可或缺的一部分。无论是出于隐私保护、突破地域限制&#xff0c;还是为了测试和优化网络应用&#xff0c;动态改变本地IP地址的需求日益增多。本文将详细介绍如何安全、有效地实现这一目标&#xff0c;旨在帮…

Linux巡检利器xsos的安装和使用

一、 一般项目基本完成的时候&#xff0c;后期运维工作的重点就是及时的&#xff0c;合理的频率巡检了&#xff0c;巡检的目的主要是及时发现各种各样的问题 那么&#xff0c;自己编写shell脚本是大部分人的第一选择&#xff0c;这里有个比较麻烦的地方&#xff0c;shell脚本…

升级phpcmsV9系统的jquery版本引起的问题处理

前言&#xff1a; 如果jquery文件名修改了&#xff0c;/phpcms/modules/admin/templates/header.tpl.php文件中的jquery名称需要对应修改 一、后台输入框的验证问题 /statics/js/formvalidator.js文件调整为&#xff1a;点击下载 二、后台全选失效问题 1、/phpcms/modules/…

通过 Lighthouse 和 speed-measure-webpack 插件分析优化构建速度与体积

一、Lighthouse Lighthouse是 Google Chrome 推出的一款开源自动化工具&#xff0c;谷歌浏览器中已经集成&#xff0c;它可以搜集多个现代网页性能指标&#xff0c;分析 Web 应用的性能并生成报告&#xff0c;为开发人员进行性能优化的提供了参考方向。 Lighthouse会生成一份报…

Aatrox-Bert-VITS2部署指南

一、模型介绍 【AI 剑魔 ①】在线语音合成&#xff08;Bert-Vits2&#xff09;&#xff0c;将输入文字转化成暗裔剑魔亚托克斯音色的音频输出。 作者&#xff1a;Xz 乔希 https://space.bilibili.com/5859321 声音归属&#xff1a;Riot Games《英雄联盟》暗裔剑魔亚托克斯 …

分布式IO模拟量模块:多领域应用的高效能解决方案

分布式IO模拟量模块是分布式IO系统中的重要组件&#xff0c;用于实现现场设备或过程的模拟量信号的采集、监视和控制。该模块通常与现场总线耦合器配合使用&#xff0c;能够接收来自现场设备的模拟量信号&#xff08;如电流、电压等&#xff09;&#xff0c;并将其转换为数字信…

谷歌地图 | 与 Android 版导航 SDK 集成的最佳实践

谷歌最近宣布了导航 SDK&#xff0c;它可以让您将熟悉的 Google 地图逐向导航体验无缝集成到您的 Android 和 iOS 应用程序中。 这篇博文概述了一些最佳实践&#xff0c;您可以使用这些实践为您的 Android 应用程序使用导航 SDK 构建流畅、一致且可靠的导航体验。 与导航地图…

Linux系统安装软件的4种方式【源码配置编译安装、yum安装、rpm包安装、二进制软件包安装(.rpm/.tar.gz/.tgz/.bz2)】

一.源码安装 linux安装软件采用源码安装灵活自由&#xff0c;适用于不同的平台&#xff0c;维护也十分方便。 &#xff08;一&#xff09;源码安装流程  源码的安装一般由3个步骤组成&#xff1a; 1.配置&#xff08;configure&#xff09; Configure是一个可执行脚本…