013-网关统一配置跨域

🧑‍🎓 个人主页：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);
    }
}

---

📢💨如果文章对你有帮助【关注👍点赞❤️收藏⭐】