🦆博主介绍：小黄鸭技术
🌈擅长领域：Java、实用工具、运维
👀 系列专栏：📢开发工具 Java之路 八股文之路
📧如果文章写作时有错误的地方，请各位大佬指正，一起进步！！！
🧡欢迎大家点赞➕收藏⭐➕评论💬支持博主🤞
目录
什么是跨域
RoYi-Cloud如何解决跨域
💖 配置方式
代码方式
Nginx反向代理方式
参数解析
什么是跨域
简单来说就是违背了浏览器的同源策略，指协议，域名，端口都要相同，其中有一个不同都会产生跨域。
RoYi-Cloud如何解决跨域
配置方式：
通过在gateway的nacos中的gateway.yml添加以下配置
spring:
cloud:
gateway:
globalcors:
corsConfigurations:
'[/**]':
allowedOriginPatterns: "*"
allowed-methods: "*"
allowed-headers: "*"
allow-credentials: true
exposedHeaders: "Content-Disposition,Content-Type,Cache-Control"代码方式：
在gateway项目中新增CorsConfig.java
package com.ruoyi.gateway.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.web.cors.reactive.CorsUtils;
import org.springframework.web.server.ServerWebExchange;
import org.springframework.web.server.WebFilter;
import org.springframework.web.server.WebFilterChain;
import reactor.core.publisher.Mono;
/**
* 跨域配置
*
* @author ruoyi
*/
@Configuration
public class CorsConfig
{
/**
* 这里为支持的请求头，如果有自定义的header字段请自己添加
*/
private static final String ALLOWED_HEADERS = "X-Requested-With, Content-Type, Authorization, credential, X-XSRF-TOKEN, token, Admin-Token, App-Token";
private static final String ALLOWED_METHODS = "GET,POST,PUT,DELETE,OPTIONS,HEAD";
private static final String ALLOWED_ORIGIN = "*";
private static final String ALLOWED_EXPOSE = "*";
private static final String MAX_AGE = "18000L";
@Bean
public WebFilter corsFilter()
{
return (ServerWebExchange ctx, WebFilterChain chain) -> {
ServerHttpRequest request = ctx.getRequest();
if (CorsUtils.isCorsRequest(request))
{
ServerHttpResponse response = ctx.getResponse();
HttpHeaders headers = response.getHeaders();
headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS);
headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS);
headers.add("Access-Control-Allow-Origin", ALLOWED_ORIGIN);
headers.add("Access-Control-Expose-Headers", ALLOWED_EXPOSE);
headers.add("Access-Control-Max-Age", MAX_AGE);
headers.add("Access-Control-Allow-Credentials", "true");
if (request.getMethod() == HttpMethod.OPTIONS)
{
response.setStatusCode(HttpStatus.OK);
return Mono.empty();
}
}
return chain.filter(ctx);
};
}
}Nginx反向代理方式：
location /api {
add_header Access-Control-Allow-Origin http://localhost:3000 always;
add_header Access-Control-Allow-Headers "Accept,Accept-Encoding,Accept-Language,Connection,Content-Length,Content-Type,Host,Origin,Referer,User-Agent";
add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS";
add_header Access-Control-Allow-Credentials true;
if ($request_method = 'OPTIONS') {
return 200;
}
proxy_cookie_domain ~\.?duck.com $host;
proxy_pass https://duck.com;
}
参数解析
allowedOriginPatterns: 放行域名，可以多个，用","分割
allowed-methods: 放行请求方式，可以多个，例如
"GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"allowed-headers: 放行头部信息
allow-credentials: 是否发送Cookie信息
exposedHeaders: 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）文章来源：https://www.toymoban.com/news/detail-437337.html
🧡欢迎大家点赞➕收藏⭐➕评论💬支持博主🤞 文章来源地址https://www.toymoban.com/news/detail-437337.html
到了这里，关于RuoYi -Cloud开源框架-跨域配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
