013-网关统一配置跨域

Silence Lamb

已于 2023-02-28 13:29:04 修改

阅读量939

点赞数

分类专栏： # ①-JAVA脚手架文章标签： java

于 2022-01-04 19:28:47 首次发布

本文链接：https://blog.csdn.net/m0_46914264/article/details/122309850

版权

①-JAVA脚手架专栏收录该内容

20 篇文章 0 订阅

订阅专栏

🧑‍🎓 个人主页：Silence Lamb
📖 本章内容：【SpringCloud-网关统一配置跨域】

1、跨域

🌳 详细教程：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

这个跨域请求的实现是通过预检请求实现的，先发送一个OPSTIONS探路，收到响应允许跨域后再发送真实请求

在这里插入图片描述

🌳 跨域流程

在这里插入图片描述

3、简单请求

某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”，请注意，该术语并不属于 Fetch （其中定义了 CORS）规范，若请求满足所有下述条件，则该请求可视为“简单请求”：
🌳 使用下列方法之一

GET
HEAD
POST

除了被用户代理自动设置的首部字段（例如 Connection，User-Agent）和在 Fetch 规范中定义为 禁用首部名称 的其他首部
允许人为设置的字段为 Fetch 规范定义的对 CORS 安全的首部字段集合
该集合为：

Accept
Accept-Language
Content-Language
Content-Type （需要注意额外的限制）
Content-Type 的值仅限于下列三者之一：
text/plain
multipart/form-data
application/x-www-form-urlencoded

请求中的任意 XMLHttpRequest 对象均没有注册任何事件监听器
XMLHttpRequest 对象可以使用 XMLHttpRequest.upload 属性访问
请求中没有使用 ReadableStream 对象

4、预检请求

与前述简单请求不同，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
如下是一个需要执行预检请求的 HTTP 请求：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://bar.other/resources/post-here/');
xhr.setRequestHeader('X-PINGOTHER', 'pingpong');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.onreadystatechange = handler;
xhr.send('<person><name>Arun</name></person>');
Copy to Clipboard

上面的代码使用 POST 请求发送一个 XML 文档，该请求包含了一个自定义的请求首部字段（X-PINGOTHER: pingpong）
另外，该请求的 Content-Type 为 application/xml。因此，该请求需要首先发起“预检请求”。

5、解决跨域

🌳方法一：使用Nginx部署为统一域

在这里插入图片描述

🌳 方法一：配置本次请求允许跨域

在这里插入图片描述

6、SpringCloud网关统一配置跨域

package com.firefly.fireflymall.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

/**
 * @Author FireFlyMallCorsConfiguration
 * @Date: 2022/1/5 20:23
 * @Description:
 */
@Configuration
public class FireFlyMallCorsConfiguration {
    @Bean // 添加过滤器
    public CorsWebFilter corsWebFilter(){
        // 基于url跨域，选择reactive包下的
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        // 跨域配置信息
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 允许跨域的头
        corsConfiguration.addAllowedHeader("*");
        // 允许跨域的请求方式
        corsConfiguration.addAllowedMethod("*");
        // 允许跨域的请求来源
        corsConfiguration.addAllowedOrigin("*");
        // 是否允许携带cookie跨域
        corsConfiguration.setAllowCredentials(true);

        // 任意url都要进行跨域配置
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}