nginx 从生产中的前端访问微服务API时出现CORS错误

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

我有一个基于微服务的应用程序,可以在开发环境中无缝工作,但我在生产中面临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作为前端。

zf9nrax1

zf9nrax11#

试着改变你的流水线顺序

builder.Services.AddCors();

// ... other app build configurations ...

app.UseCors(p =>
{
    p.AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader();
});

app.UseRouting();

相关问题