Express Gateway CORS + apiKey 授权 401 Unauthorized

Question

意图

CORS 配置似乎有效且有效，在 React-App 中我可以轻松访问网关。也可以通过 Postman 访问，所以 apiKey 不会导致问题。

但如果我使用 apiKey 添加身份验证，我会在所有浏览器中收到错误消息。 在 Chrome 中：

问题

选项https://example-gateway.com/test 401 （未经授权）

访问 XMLHttpRequest 在 'https://example-gateway.com/test' 来自原点 'https://example-app.com' 已被 CORS 阻止 策略：对预检请求的响应未通过访问控制 检查：它没有 HTTP ok 状态。

是什么导致了这种行为？浏览器是否没有通过 OPTIONS-CORS 请求发送所需的 apiKey 并因此被阻止？

如何解决？

代码

pipelines:
  adminAPI:
    apiEndpoints:
      - testApi
    policies:
      - cors:
          - action:
              origin: [https://example-gateway.com]
              methods: GET,POST,PUT,DELETE,OPTIONS
              preflightContinue: true
              optionsSuccessStatus: 204
              credentials: true
              maxAge: 600
              allowedHeaders:
                - Authorization
              exposedHeaders:
                - Authorization
      - key-auth:
          - action:
              apiKeyHeader: Authorization
              disableHeadersScheme: false
      - proxy:
          - action:
              serviceEndpoint: testBackend

Answer 1

我认为问题在于 key-auth 为 CORS 的 OPTION 调用返回 401，这就是您可能收到此类问题的原因。

您很可能可以通过在 key-auth 调用中添加条件来解决此问题。

http:
  port: ${EG_HTTP_PORT:-8080}
# https:
#   port: 9999
#   tls: {}
admin: # remove this section to disable admin API
  port: 9876
  host: localhost # use 0.0.0.0 to listen on all IPv4 interfaces
apiEndpoints:
  api:
    host: '*'
serviceEndpoints:
  backend:
    url: 'http://localhost:9876' # btw this is EG admin API
policies:
  - proxy
  - key-auth
  - cors
pipelines:
  adminAPI:
    apiEndpoints:
      - api
    policies:
      - cors:
      - key-auth:
        - condition:
            name: not
            condition:
              name: method
              methods:
                - OPTIONS
        action:
          apiKeyHeader: Authorization
          disableHeadersScheme: false
      - proxy:
          action:
            serviceEndpoint: backend