使用react to nginx作为反向代理发出请求时会出现Cors问题,对于预检请求,不允许获取重定向

q35jwt9p  于 2023-10-17  发布在  Nginx
关注(0)|答案(1)|浏览(125)

代码在postman中运行良好,但我在使用react向/product服务发出请求时出现以下cors错误:
CORS策略已阻止从源“http://localhost:3000”访问位于“http://localhost/product”的XMLHttpRequest:对印前检查请求的响应未通过访问控制检查:预检请求不允许重定向。

以下是我的nginx配置)

worker_processes 4;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        charset utf-8;
        location / {
            # auth_request     /auth;
            proxy_pass http://user_services:8001;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }

        location /product/ {
            auth_request     /auth;
            # auth_request_set $auth_status $upstream_status;
            rewrite ^/product/(.*) /$1 break;
           
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            add_header 'Access-Control-Allow-Origin' '*' always;
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            proxy_pass http://onboarding_project:8002;
        
        }

        location /notification/ {
            # auth_request     /auth;
            # auth_request_set $auth_status $upstream_status;
            rewrite ^/notification/(.*) /$1 break;
            proxy_pass http://notification_service:8006;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }

        location /payment/ {
        #    auth_request     /auth;
            rewrite ^/payment/(.*)$ /$1 break;
            proxy_pass http://payment_microservices:8003;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' 'http://localhost:3000';
                add_header 'Access-Control-Allow-Methods' 'POST, OPTIONS';  # Adjust this based on your allowed methods
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';  # Adjust the headers as needed
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            add_header 'Access-Control-Allow-Origin' 'http://localhost:3000' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range' always;

        }

        location = /auth {
            internal;
            proxy_pass              http://user_services:8001/api/user/auth;
            add_header 'Access-Control-Allow-Origin' 'http://localhost:3000' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range' always;
        
        }
    }
}

我试图在提出原始请求之前先在内部调用auth。我尝试了很多东西,你可以看到付款块,但没有工作。以下是我如何从客户端请求):

const response = await axios.get("http://localhost/product", {
        headers: {
          Authorization: "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2OTU2NzYzODEsImV4cCI6MTY5NTY3OTk4MSwiYXVkIjoiNjUxMWY2YWRkN2Q4YmMyZDIyYTE0MWY2IiwiaXNzIjoiaW50ZWxsaWJsb2NrLmNvbSJ9.bJ5Qd6d9GvGnqJu5UFT8m4UTvZsEmly13QqVbMBwFz0"
        }
      });
      console.log(response, "okayyy");
    } catch (e) {
      console.log(e);
    }

**请查看。谢谢

gijlo24d

gijlo24d1#

从你的代码中,我没有看到任何可以解释拒绝的流动问题。我可以提供两件事,然而,可能适用:
1.你确定你没有得到一个php失败?您提到了postman,这通常会使其作为响应输出的一部分对您可见。ngnix日志中是否有错误?
1.有些人抱怨说,返回204导致一些客户拒绝。考虑到没有真实的理由退回任何东西,除了200美元用于飞行前,你试过吗?

相关问题