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