跳到主要内容

Gateway跨域配置

介绍​

在现代Web开发中，跨域资源共享（Cross-Origin Resource Sharing，简称CORS）是一个常见的问题。当前端应用（例如运行在http://localhost:3000的React应用）尝试访问后端服务（例如运行在http://localhost:8080的Spring Boot应用）时，浏览器会阻止这种跨域请求，除非后端服务明确允许。

Spring Cloud Gateway作为微服务架构中的API网关，可以帮助我们统一处理跨域请求。通过配置CORS，我们可以允许特定的前端应用访问后端服务，从而避免跨域问题。

什么是跨域？​

跨域是指浏览器从一个域名的网页去请求另一个域名的资源。出于安全考虑，浏览器默认会阻止跨域请求，除非服务器明确允许。跨域请求通常涉及以下内容：

  • 不同的协议（如http和https）
  • 不同的域名（如example.com和api.example.com）
  • 不同的端口（如localhost:3000和localhost:8080）

Spring Cloud Gateway中的跨域配置​

在Spring Cloud Gateway中，我们可以通过配置CorsConfiguration来允许特定的跨域请求。以下是一个简单的配置示例：

yaml
spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: "http://localhost:3000"
            allowedMethods: "GET,POST,PUT,DELETE"
            allowedHeaders: "*"
            allowCredentials: true
            maxAge: 3600

配置解析​

  • allowedOrigins: 允许的源（即前端应用的域名）。可以指定多个域名，用逗号分隔。
  • allowedMethods: 允许的HTTP方法（如GET、POST等）。
  • allowedHeaders: 允许的请求头。*表示允许所有请求头。
  • allowCredentials: 是否允许携带凭证（如Cookies）。
  • maxAge: 预检请求（Preflight Request）的缓存时间（以秒为单位）。
提示

maxAge参数用于控制浏览器缓存预检请求的时间。较长的缓存时间可以减少不必要的预检请求，从而提高性能。

实际案例​

假设我们有一个前端应用运行在http://localhost:3000，后端服务运行在http://localhost:8080。前端应用需要向后端服务发送GET和POST请求。我们可以通过以下配置允许跨域请求：

yaml
spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: "http://localhost:3000"
            allowedMethods: "GET,POST"
            allowedHeaders: "*"
            allowCredentials: true
            maxAge: 3600

测试跨域请求​

假设我们有一个简单的GET请求：

javascript
fetch('http://localhost:8080/api/data', {
  method: 'GET',
  credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

如果配置正确，浏览器将允许该请求，并返回后端服务的数据。

总结​

通过Spring Cloud Gateway的跨域配置，我们可以轻松解决前端应用与后端服务之间的跨域问题。合理的CORS配置不仅可以提高应用的安全性，还能确保前后端的顺畅通信。

附加资源​

练习​

  1. 尝试在本地环境中配置Spring Cloud Gateway，允许来自http://localhost:3000的跨域请求。
  2. 修改allowedMethods，尝试允许PUT和DELETE请求。
  3. 研究maxAge参数的作用，并尝试调整其值，观察对预检请求的影响。

通过以上练习，你将更深入地理解Spring Cloud Gateway中的跨域配置。