RuoYi -Cloud开源框架-跨域配置

🦆博主介绍:小黄鸭技术

🌈擅长领域: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: 暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小黄鸭技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值