博主介绍：小黄鸭技术

擅长领域：Java、实用工具、运维

系列专栏：开发工具Java之路八股文之路

如果文章写作时有错误的地方，请各位大佬指正，一起进步！！！

欢迎大家点赞➕收藏⭐➕评论支持博主

目录

什么是跨域

RoYi-Cloud如何解决跨域

配置方式

代码方式

Nginx反向代理方式

参数解析

什么是跨域

简单来说就是违背了浏览器的同源策略，指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

RoYi-Cloud如何解决跨域

配置方式：

通过在gateway的nacos中的gateway.yml添加以下配置

spring:cloud:gateway:globalcors:corsConfigurations:'[/**]':allowedOriginPatterns: "*"allowed-methods: "*"allowed-headers: "*"allow-credentials: trueexposedHeaders: "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 */@Configurationpublic 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";@Beanpublic 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: 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）

欢迎大家点赞➕收藏⭐➕评论支持博主