Vue + Axios +Spring Cloud Gateway Cors

Question

我使用Axios请求基于Spring Cloud Gateway的服务,出现了被block的问题:

Access to XMLHttpRequest at 'http://localhost:9443/usc-merchant/ticket/ticketKind/listPage?orders%5B0%5D.asc=false&orders%5B0%5D.column=create_time' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

正常情况下是服务端没有prefight请求,但实际上是有prefight的请求的

请求网址: http://localhost:9443/usc-merchant/ticket/ticketKind/listPage?orders%5B0%5D.asc=false&orders%5B0%5D.column=create_time
请求方法: OPTIONS
状态代码: 200 OK
远程地址: [::1]:9443
引荐来源网址政策: strict-origin-when-cross-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: user
Access-Control-Allow-Methods: GET,POST,OPTIONS,PUT
Access-Control-Allow-Origin: http://localhost:8081
Access-Control-Max-Age: 3600
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
content-length: 0
Expires: 0
Pragma: no-cache
Referrer-Policy: no-referrer
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1 ; mode=block
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Access-Control-Request-Headers: user
Access-Control-Request-Method: GET
Connection: keep-alive
Host: localhost:9443
Origin: http://localhost:8081
Referer: http://localhost:8081/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36
orders[0].asc: false
orders[0].column: create_time

我的spring cloud gateway配置如下:

spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: "*"
            allowedHeaders: "*"
            allowCredentials: true
            maxAge: 3600
            allowedMethods:
              - GET
              - POST
              - OPTIONS
              - PUT

可以看到服务端已经提供了
Access-Control-Allow-Origin: http://localhost:8081
但是浏览器任然出现以下错误:

A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request.

To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.

Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).

受影响的资源

1项请求

| 请求 | 状态 | 预检请求（如果出现问题） | 标头 | 问题 | 无效值（若有） |
| ------------------------------------------------------------ | ------ | ------------------------ | --------------------------- | -------- | -------------- |
| listPage?orders%5B0%5D.asc=false&orders%5B0%5D.column=create_time | 已屏蔽 | | Access-Control-Allow-Origin | 缺少标头 | |

• 了解详情：跨域资源共享 (CORS)

Answer 1

端口不一致也算跨域，要设置Access-Control-Allow-Origin为*就可以任何域名请求

spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowCredentials: true
            allowedOriginPatterns: "*"
            allowedMethods: "*"
            allowedHeaders: "*"
        add-to-simple-url-handler-mapping: true

Spring Cloud Gateway 跨域 CORS 配置方式实现 - 星临人间 - 博客园 网上找了一堆文章全是说这样写无效 globalcors: cors-configurations: '[/**]': allowCredentials: true allowedOri https://www.cnblogs.com/mikey1988/p/14239500.html