React w/ Kubernetes 部署 API 给出 cors 错误

Question

这与其他cors相关问题不同

我是运行我的节点后端 - api 在 部署在 Digitalocean 上的 kubernetes 微服务上。我已经阅读了所有与此问题相关的 blogs/forums，但没有找到任何解决方案（特别是与 Digitalocean 相关的解决方案）。

我无法通过“localhost:3000”上的 React 应用程序运行或外部任何地方连接到集群 kubernetes 集群。

它给我以下错误：

Access to XMLHttpRequest at 'http://cultor.dev/api/users/signin' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

kubernetes 集群的负载均衡器正在侦听 "cultor.dev"，它被设置为 /etc/hosts[=33 中的本地域=]. 我可以使用 Postman 让它工作！

NOTE: I have tried using cors package as well, it won't help. Also, it works fine if I run this react app inside of the kubernetes cluster which I do not want.

Ingress nginx config (tried using annotations mentioned on the official website):

apiVersion: extensions/v1beta1 kind: Ingress metadata: name: ingress-service ## this tells ingress to pick up the routing rules mentioned in this config annotations: nginx.ingress.kubernetes.io/default-backend: ingress-nginx-controller kubernetes.io/ingress.class: nginx ## tells ingress to check for regex in the config file nginx.ingress.kubernetes.io/use-regex: 'true' # nginx.ingress.kubernetes.io/enable-cors: 'true' # nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS" # nginx.ingress.kubernetes.io/cors-allow-origin: "*" # nginx.ingress.kubernetes.io/cors-max-age: 600 # certmanager.k8s.io/cluster-issuer: letsencrypt # kubernetes.io/ingress.class: nginx # service.beta.kubernetes.io/do-loadbalancer-enable-proxy-protocol: "true"

One of the microservices config (tried cors package as well):

// APP SETTINGS app.set('trust proxy', true); app.use(json()); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', '*'); res.header('Access-Control-Request-Headers', '*'); if (req.method === "OPTIONS") { res.header('Access-Control-Allow-Methods', '*'); return res.status(200).json({}); } next(); });

Answer 1

为什么 cors 设置有注释？

nginx.ingress.kubernetes.io/configuration-snippet: |
  add_header Access-Control-Allow-Origin $http_origin;
  add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
  add_header Access-Control-Allow-Credentials true;

GitHub

上的相同问题

Answer 2

Redirect is not allowed for a preflight request.

似乎发生了重定向。没有足够的信息可以得出结论。我的猜测是您在 Ingress 上设置了 TLS，并且 http://cultor.dev/api/users/signin 被自动重定向到 https.

Answer 3

CORS policy: Response to preflight request doesn't pass access 
control check: Redirect is not allowed for a preflight request.

预检 CORS 请求实际上是浏览器向您的服务器发出的一个单独请求，以检查响应中发回的访问控制 headers 是否会接受主请求。预检请求使用 HTTP OPTIONS 方法。我敢打赌，如果您为传入请求记录 req.method，您将看到 OPTIONS 请求传入。

当您收到这些预检请求之一时，您应该以适当的 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 响应 headers.

进行响应

Answer 4

好的，经过大量研究并在其他答案的帮助下，我做了以下事情：

我将对后端（从客户端）的请求更改为 https 而不是 http。这修复了错误 Redirect is not allowed for a preflight request
我更改了配置 ingress nginx 配置以消除错误 multiple values in Access-Control-Allow-Origin :

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    nginx.ingress.kubernetes.io/default-backend: ingress-nginx-controller
    kubernetes.io/ingress.class: nginx
    ## tells ingress to check for regex in the config file
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/configuration-snippet: |
      add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
      add_header Access-Control-Allow-Credentials true;
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS"

希望对其他人也有帮助。

React w/ Kubernetes 部署 API 给出 cors 错误

React w/ Kubernetes deployed API giving cors error

node.js

reactjs

digital-ocean

kubernetes

microservices

这与其他cors相关问题不同