Express Gateway（启用密钥验证）在从前端应用程序调用时给出 COR 问题

Question

问题描述

我分别使用 Angular 和 nginx 开发和部署了我的前端应用程序。

资源服务器使用No stress NodeJS开发。

流量为

UI -> express gateway -> resource server

每当尝试从 UI 调用 API 时，启用 key-auth 在快速网关中，出现错误

Access to XMLHttpRequest at 'http://ip:port/api/function_name' from origin 'http://url' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Same API when called from Postman works though. It also works if I remove 'key-auth' from gateway. 

分享在各个级别完成的代码更改：

代码 - Express 网关

example:
    apiEndpoints:
      - example
    policies:
      - cors:
          - action:
              origin: ["*"]
              methods: "HEAD,GET,PUT,PATCH,POST,DELETE,OPTIONS"
              preflightContinue: true
              optionsSuccessStatus: 204
              maxAge: 600
              allowedHeaders:
                [
                  "Origin, X-Requested-With, Content-Type, Accept, Authorization",
                ]
      - key-auth:
          - condition:
              name: not
              condition:
                  name: method
                  methods:
                    - OPTIONS
      - proxy:
          - action:
              serviceEndpoint: exampleService
              proxyTimeout: 0

代码 - Angular

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'Application/json; charset=UTF-8',
        'Authorization': "Bearer " + apiKey,
        'Access-Control-Allow-Origin': '*'
    }),
};

代码 - 资源服务器 - routes.js

export default function routes(app) {
   app.use(cors());
   // Also tried setting res.setHeader explicitly, but no success.
}

代码-nginx级别

server(){
   ...
   location / {
        # Simple Requests
        if ($request_method ~* "(GET|POST)") {
             add_header "Access-Control-Allow-Origin"  *;
        }

        # Preflighted requests
        if ($request_method = OPTIONS ) {
             add_header "Access-Control-Allow-Origin"  *;
             add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
             add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
             return 200;
        }

        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
   }
}

我浏览了关于这个问题的各种链接，尝试了如上所示的多种方法，但找不到任何解决方案，因此提出了新的解决方案。

如何消除此 COR 错误？

Answer 1

我做了以下 corrections/changes:

后问题解决了

代码 - Angular（用 apiKey 替换 Bearer）

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'Application/json; charset=UTF-8',
        'Authorization': "apiKey " + apiKey,
        'Access-Control-Allow-Origin': '*'
    }),
};

代码-nginx level（修改了location函数中的条件）

server {
        ....
        location / {
            if ($request_method = OPTIONS) {
                return 204;
            }
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Expose-Headers Content-Length;
            add_header Access-Control-Allow-Headers Range;
            try_files $uri $uri/ =404;
        }
}

其他一切都保持不变。

Answer 2

也有助于解决网关jwt校验问题