我有一个基于微服务的应用程序,可以在开发环境中无缝工作,但我在生产中面临CORS问题。当我的前端尝试向ApiGateway发送请求时,我收到以下错误:
Access to XMLHttpRequest at 'http://apigateway/get_all_urls' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
为了解决这个问题,我做了以下修改:
**1.后端更改:**我在服务和API网关中,都增加了如下CORS配置:
builder.Services.AddCors();
// ... other app build configurations ...
app.UseRouting();
app.UseCors(p =>
{
p.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
});
**2.前端服务器配置:**我的前端运行在Nginx服务器上。我更新了/etc/nginx/conf.d/default.conf
文件,如下所示:
server {
listen 80;
server_name _;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
# Preflight request handling
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' '*';
add_header 'Access-Control-Allow-Headers' '*';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
# Regular request headers
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' '*';
add_header 'Access-Control-Allow-Headers' '*';
}
error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
}
}
**诊断步骤:**为了检查连接,我在前端容器中执行了一个curl
命令:
curl -v http://apigateway/get_all_urls
果然不出所料。
尽管有这些配置,CORS错误仍然存在。任何见解或建议,以解决这个问题将不胜感激!
此外,我使用.NET作为后端,VueJS和TypeScript作为前端。
1条答案
按热度按时间zf9nrax11#
试着改变你的流水线顺序