​
Pig Gateway

​
网关跨域支持

如果不知道什么是跨域 (CORS)，建议先阅读以下内容

跨域资源共享 CORS 详解

HTTP 访问控制（CORS）

​
配置方式

在网关的配置文件中加入以下内容 (请根据实际情况修改)

spring:
  cloud:
    gateway:
#      default-filters:
#        - DedupeResponseHeader=Access-Control-Allow-Origin
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOriginPatterns: "*"           #注意这个设置只对 spring boot 2.4+ 有效，低版本 使用  allowedOrigins: "*" 属性
            allowed-methods: "*"
            allowed-headers: "*"
            allow-credentials: true
            exposedHeaders: "Content-Disposition,Content-Type,Cache-Control"
  • 以上配置可作为开发环境使用，生成环境建议你根据实际情况修改（请先理解 CORS，并参考 org.springframework.cloud.gateway.config.GlobalCorsProperties）
  • 跨域时会产生预检请求 (Pre-Flight Request)，这样就会对你的服务器产生额外的网络请求。如果可以通过部署手段解决跨域，则可以关闭跨域支持，方法是把以上配置信息清理掉。

​
测试

为了演示跨域支持效果，可以修改一下前端项目 (Pig-ui) 的登录代码

export const loginByUsername = (username, password, code, randomStr) => {
  const grant_type = 'password'

  return request({
    // 原来的 API 接口地址
    //url: '/auth/oauth/token',
    // 为了触发跨域，直接修改为网关的 url，这里的 IP 需要改成你自己的，要用真实 IP
    url: 'http://10.11.12.7:9999/auth/oauth/token',
    headers: {
      isToken:false,
      'Authorization': 'Basic cGlnOnBpZw=='
    },
    method: 'post',
    params: { username, password, randomStr, code, grant_type, scope }
  })
}

将前端项目跑起来，打开登录页面，观察点击登录按钮的 XHR 请求，你会发现浏览器发送了两次请求：

  • 第一次是OPTIONS方式，这是因为浏览器检测到有一个请求跨域了，于是发出一个预检请求，问一问服务端”有啥处理意见”。
  • 第二次是POST方式，也就是真正的需要执行的请求，这是因为”服务端的回答让浏览器满意”了，所以浏览器执行真正的请求。如果服务端（也就是Pig Gateway）没有进行相关配置，浏览器就没法得到它期望的答复，这一步便不会执行。

​
♥️ 获取支持

遇到问题？

如果您在使用过程中遇到任何问题、有功能建议或需求，请点击此卡片前往 Gitee 仓库提交 Issue。