使用 Kubernetes 部署的 API 做出react,出现 cors 错误

IT技术 node.js reactjs kubernetes microservices digital-ocean
2021-05-18 13:36:53

这与其他与 cors 相关的问题不同

在部署在 Digitalocean 上的 kubernetes上的微服务上运行我的节点后端 API 我确实阅读了与此问题相关的所有博客/论坛,但没有找到任何解决方案(特别是与 Digitalocean 相关的解决方案)。

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

它给了我以下错误:

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 集群的负载均衡器正在侦听/etc/hosts 中设置为本地域的“cultor.dev”我可以使用 Postman 让它工作!

注意: 我也尝试过使用 cors 包,它无济于事。此外,如果我在我不想要的 kubernetes 集群内运行这个 react 应用程序,它也能正常工作

Ingress nginx config(尝试使用官网提到的注解):

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"

微服务配置之一(也尝试过 cors 包):

// 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();
});
4个回答

为什么要注释 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 上同样的问题

好的,经过大量研究并在其他答案的帮助下,我执行了以下操作:

  1. 我将向后端(从客户端)的请求更改为https而不是http这修复了错误Redirect is not allowed for a preflight request
  2. 我更改了配置入口 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"

我希望它也能帮助其他人。

预检请求不允许重定向。

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

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

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

当您收到这些预检请求之一时,您应该使用适当的Access-Control-Allow-OriginAccess-Control-Allow-Headers响应标头进行响应。