服务器之家：专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Java教程 - 使用SpringCloudApiGateway之支持Cors跨域请求

使用SpringCloudApiGateway之支持Cors跨域请求

2021-10-13 15:14Moshow郑锴 Java教程

这篇文章主要介绍了使用SpringCloudApiGateway之支持Cors跨域请求的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

问题背景

公司的项目需要前后端分离，vue+java，这时候就需要支持Cors跨域请求了。最近对zuul进行升级，假如说zuul是1.0的话，api gateway就是2.0的网关，支持ws等，基于NIO，各方面还是强大的。

解决方案

新建一个Configuration类即可

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import org.springframework.cloud.client.discovery.DiscoveryClient;
import org.springframework.cloud.gateway.discovery.DiscoveryClientRouteDefinitionLocator;
import org.springframework.cloud.gateway.route.RouteDefinitionLocator;
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;
/**
 * SpringApiGateway Cors
 */
@Configuration
public class RouteConfiguration {
    //这里为支持的请求头，如果有自定义的header字段请自己添加（不知道为什么不能使用*）
    private static final String ALLOWED_HEADERS = "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client";
    private static final String ALLOWED_METHODS = "*";
    private static final String ALLOWED_ORIGIN = "*";
    private static final String ALLOWED_Expose = "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client";
    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-Origin", ALLOWED_ORIGIN);
                headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS);
                headers.add("Access-Control-Max-Age", MAX_AGE);
                headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS);
                headers.add("Access-Control-Expose-Headers", ALLOWED_Expose);
                headers.add("Access-Control-Allow-Credentials", "true");
                if (request.getMethod() == HttpMethod.OPTIONS) {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }
            }
            return chain.filter(ctx);
        };
    }
    /**
    *
    *如果使用了注册中心（如：Eureka），进行控制则需要增加如下配置
    */
    @Bean
    public RouteDefinitionLocator discoveryClientRouteDefinitionLocator(DiscoveryClient discoveryClient) {
        return new DiscoveryClientRouteDefinitionLocator(discoveryClient);
    }
}

application.yml配置

官方文档提及到还有另外一种方式，就是通过yml来配置。

?
1
2
3
4
5
6
7
8
9
spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins: "https://blog.csdn.net/moshowgame"
            allowedMethods:
            - GET

跨域解决方案（CORS）

1. 什么是跨域？

跨域问题是出于浏览器的【同源策略】限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

由于我们现在是采用的前后端分离的微服务架构，前端和后端必定存在跨域问题。解决跨域问题可以采用CORS。

2. CORS简介

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

CORS需要浏览器和服务器同时支持。但是目前基本上浏览器都支持，所以我们只要保证服务器端服务器实现了 CORS 接口，就可以跨源通信。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

3. 具体解决方式

解决跨域问题，就是在服务器端给响应添加头信息

Name Required Comments
Access-Control-Allow-Origin 必填 允许请求的域
Access-Control-Allow-Methods 必填 允许请求的方法
Access-Control-Allow-Headers 可选 预检请求后，告知发送请求需要有的头部
Access-Control-Allow-Credentials 可选 表示是否允许发送cookie，默认false；
Access-Control-Max-Age 可选 本次预检的有效期，单位：秒；


3.1 在Spring Boot 中解决

在spring boot中给我们提供了 @CrossOrigin 注解用于解决跨域问题。

使用场景要求：jdk1.8+、Spring4.2+

只需要在我们需要的controller上加@CrossOrigin

?
1
2
3
4
5
6
7
@RestController
//实现跨域注解
//origin="*"代表所有域名都可访问
//maxAge飞行前响应的缓存持续时间的最大年龄，简单来说就是Cookie的有效期 单位为秒若maxAge是负数,则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失
@CrossOrigin(origins = "*",maxAge = 3600)
@RequestMapping("/album")
public class AlbumController {}

3.2 在spring Cloud中解决

只需要在spring Cloud Gateway 服务中添加配置就行

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
spring:
  application:
    name: system-gateway
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]': # 匹配所有请求
            allowedOrigins: "*" #跨域处理 允许所有的域
            allowedMethods: # 支持的方法
            - GET
            - POST
            - PUT
            - DELETE

当然也可以自己利用Gateway的拦截器来手动添加相应的头信息

?
1
2
3
4
5
6
default-filters:
      - AddResponseHeader=Access-Control-Allow-Credentials,true
      - AddResponseHeader=Access-Control-Allow-Headers,access-control-allow-origin
      - AddResponseHeader=Access-Control-Allow-Methods,GET
      - AddResponseHeader=Access-Control-Allow-Origin,*
      - AddResponseHeader=Access-Control-Allow-Age,3600

3.3 在Nginx中解决

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
location /example {
   if ($request_method = 'OPTIONS') {
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Max-Age 1728000;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
       add_header Access-Control-Allow-Headers  'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
       add_header Content-Type' 'text/plain; charset=utf-8';
       add_header Content-Length 0 ;
       return 204;
    }
 
+   if ($http_origin ~* (https?://(.+\.)?(example\.com$))) {
+     add_header  Access-Control-Allow-Origin $http_origin;
+     add_header  Access-Control-Allow-Credentials true;
+     add_header  Access-Control-Allow-Methods GET,POST,OPTIONS;
+     add_header  Access-Control-Expose-Headers Content-Length,Content-Range;
+   }
 
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8080/;
   }

解释：

if ($request_method = 'OPTIONS') {...} 当请求方法为 OPTIONS 时:

  1. 添加允许源 Access-Control-Allow-Origin 为 * (可根据业务需要更改)
  2. 添加缓存时长 Access-Control-Max-Age，当下次请求时，无需再发送 OPTIONS 请求
  3. 添加允许的方法，允许的首部
  4. 添加一个内容长度为0，类型为 text/plain; charset=utf-8 , 返回状态码为 204 的首部

if ($http_origin ~* (https?://(.+\.)?(example\.com$))) {...}, 当 origin 为合法域名(可根据业务调整或去除合法域名验证)时:

  1. 添加允许源Access-Control-Allow-Origin为 $http_origin (可根据业务需要更改)
  2. 添加允许认证Access-Control-Allow-Credentials为 true ，允许接收客户端 Cookie(可根据业务需要更改。 但要注意，当设置为true时，Access-Control-Allow-Origin 不允许设置为 *)
  3. 添加允许的方法，暴露的首部

至此，完成跨域请求正确响应。

以上，是对跨域请求在Web Server的解决方案，主要是通过响应 OPTIONS 方法和添加允许源来解决。希望能给大家一个参考，也希望大家多多支持服务器之家

原文链接：https://zhengkai.blog.csdn.net/article/details/84618781

  • SpringCloud
  • cors
  • 跨域请求
  • gateway

    • 延伸 · 阅读

    精彩推荐
    • Java教程小米推送Java代码

      小米推送Java代码

      今天小编就为大家分享一篇关于小米推送Java代码，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧...

      富贵稳中求8032021-07-12
    • Java教程升级IDEA后Lombok不能使用的解决方法

      升级IDEA后Lombok不能使用的解决方法

      最近看到提示IDEA提示升级，寻思已经有好久没有升过级了。升级完毕重启之后，突然发现好多错误，本文就来介绍一下如何解决，感兴趣的可以了解一下...

      程序猿DD9332021-10-08
    • Java教程xml与Java对象的转换详解

      xml与Java对象的转换详解

      这篇文章主要介绍了xml与Java对象的转换详解的相关资料,需要的朋友可以参考下...

      Java教程网2942020-09-17
    • Java教程Java BufferWriter写文件写不进去或缺失数据的解决

      Java BufferWriter写文件写不进去或缺失数据的解决

      这篇文章主要介绍了Java BufferWriter写文件写不进去或缺失数据的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望...

      spcoder14552021-10-18
    • Java教程Java8中Stream使用的一个注意事项

      Java8中Stream使用的一个注意事项

      最近在工作中发现了对于集合操作转换的神器，java8新特性 stream，但在使用中遇到了一个非常重要的注意点，所以这篇文章主要给大家介绍了关于Java8中S...

      阿杜7472021-02-04
    • Java教程Java实现抢红包功能

      Java实现抢红包功能

      这篇文章主要为大家详细介绍了Java实现抢红包功能，采用多线程模拟多人同时抢红包，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙...

      littleschemer13532021-05-16
    • Java教程20个非常实用的Java程序代码片段

      20个非常实用的Java程序代码片段

      这篇文章主要为大家分享了20个非常实用的Java程序片段，对java开发项目有所帮助，感兴趣的小伙伴们可以参考一下 ...

      lijiao5352020-04-06
    • Java教程Java使用SAX解析xml的示例

      Java使用SAX解析xml的示例

      这篇文章主要介绍了Java使用SAX解析xml的示例，帮助大家更好的理解和学习使用Java，感兴趣的朋友可以了解下...

      大行者10067412021-08-30
    最近更新
    编辑推荐
    阅读排行
    热门标签
    501 　 406 　 415 　 1433 　 2000 　 401 　 330 　 GOF23 　 堆栈类 　 微信公众号 　 注册服务 　 嵌套循环 　 critical 　 consul 　 spring 　 集合 　 volatile 　 Hibernate 　 Java 　 new 　 double 　 泛型 　 Java编程 　 遍历 　 设计模式 　 supplyAsync 　 制表符 　 回车 　 写入文件 　 JAVA8 　
    © 2019-2024 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图