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

ops/2024/10/19 5:33:45/

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

简单请求条件
方法限制: 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.ppmy.cn/ops/126641.html

相关文章

YOLOv10和Ollama增强OCR简要流程

使用YOLOv10和Ollama增强OCR的过程可以分为几个步骤。YOLOv10是一种高效的目标检测模型&#xff0c;而Ollama则是一种用于文本识别的工具。以下是一个基本的工作流程&#xff1a; 步骤 1&#xff1a;准备环境 安装依赖&#xff1a; 确保你安装了YOLOv10的相关库&#xff08;如…

008、相交链表

0、题目描述 相交链表 1、法1 嵌套循环&#xff0c;从listA的第一个节点开始与listB的每个节点比对&#xff0c;有相同的就返回这个节点。 时间复杂度是n^2 struct ListNode *getIntersectionNode(struct ListNode *headA, struct ListNode *headB) {struct ListNode* pa …

【大数据技术基础 | 实验一】配置SSH免密登录

文章目录 一、实验目的二、实验要求三、实验原理&#xff08;一&#xff09;大数据实验一体机&#xff08;二&#xff09;SSH免密认证 四、实验环境五、实验内容和步骤&#xff08;一&#xff09;搭建集群服务器&#xff08;二&#xff09;添加域名映射&#xff08;三&#xff…

Python 程序打包

将 Python 程序打包成可以在 Windows 和 CentOS 上运行的可执行程序&#xff0c;通常需要使用不同的工具和方法。下面介绍如何在两种平台上将 Python 程序打包为可执行文件。 1. 打包 Python 程序为 Windows 可执行文件 在 Windows 上&#xff0c;最常用的打包工具是 PyInsta…

在 Jupyter Notebook 中,无法看到特定 Conda 环境的内核

问题概述 在 Jupyter Notebook 中&#xff0c;无法看到特定 Conda 环境的内核&#xff0c;导致无法在该环境下运行代码。这通常是由于内核未正确注册到 Jupyter 所致。 常见原因 未安装 ipykernel&#xff1a;每个 Conda 环境需要安装 ipykernel 才能作为 Jupyter 内核使用。…

Android 下通过触发 SIGTRAP 信号实现反调试

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 详细的 Linux 信号列表 Linux 信号是一种用于进程间通信&#xff08;IPC&#xff09;和异常处理的机制。以下是详细的 Linux 信号列表&#xff0c;包含信号名…

理解学习JavaScript当中的混入操作(Mixin)

介绍 混入&#xff08;Mixin&#xff09; 是一种代码复用的模式。它的主要目的是将一个对象的功能“混入”到另一个对象中&#xff0c;而不是通过继承。这种模式通常被用来在多个类之间共享功能&#xff0c;而无需使用复杂的继承层次。 在 JavaScript 中&#xff0c;混入可以…

Python网络爬虫

随着互联网的迅猛发展&#xff0c;数据成为了新的“石油”。人们对于信息的需求日益增涨&#xff0c;尤其是在市场分析、学术研究和数据挖掘等领域。网络爬虫作为一种自动提取网络数据的技术&#xff0c;因其强大的能力而备受关注。而Python&#xff0c;凭借其简洁的语法和丰富…