容器化 React 和 C# 应用程序之间的 CORS 请求失败

Question

使用在 Docker 上运行的 .Net 应用程序在本地运行 React 应用程序似乎工作正常，但使用

docker-compose

运行两者会导致 CORS 失败：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://backend:5000/Account/Login. (Reason: CORS request did not succeed).

我的

docker-compose.yml

文件：

version: '3.9'
services:
  backend:
    container_name: backend
    build: ./backend
    restart: always
    ports:
      - "5000:5000"

  frontend:
    build: ./frontend
    restart: always
    ports:
      - '3000:3000'
    environment:
      - REACT_APP_API_BASE_URL=http://backend:5000/

反应

Dockerfile

：

FROM node:14

WORKDIR /user/src/app

COPY ./package.json ./
COPY ./yarn.lock ./

RUN yarn install

COPY . .

EXPOSE 3000

CMD ["yarn", "start"]

和.Net

Dockerfile

：

FROM mcr.microsoft.com/dotnet/sdk:5.0
WORKDIR /app
COPY . .
WORKDIR /app/MyApplicationName/MyApplicationName.Api
RUN dotnet build .
CMD ASPNETCORE_URLS=http://*:$PORT dotnet run --urls "http://*:5000;http://*:5001" MyApplicationName.Api.dll

我做了一些搜索，并将以下内容添加到

Startup.cs

，但它没有改变任何东西：

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy(_allowedOrigins,
                builder =>
                {
                    builder.SetIsOriginAllowed(isOriginAllowed: _ => true).AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
                });
            });

            ...
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseCors(_allowedOrigins);

            ...
        }

Answer 1

注意：出于安全原因，请详细说明出现问题的情况 CORS 请求不适用于 JavaScript 代码。所有代码都知道 是发生了错误。确定具体内容的唯一方法 出错的是查看浏览器的控制台了解详细信息。

CORS 错误消息 Firefox 的控制台在其控制台中显示消息 当请求由于 CORS 失败时。错误文本的一部分是“原因” 消息可让您更深入地了解问题所在。原因 下面列出了消息；点击消息打开文章 更详细地解释错误并提供可能的解决方案。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors

您可以在 Chrome 中执行相同的操作。

但我首先会在容器中采用限制较少的 CORS 策略，看看是否有效。

Answer 2

确保服务器上的 CORS 策略允许任何方法，并允许任何标头（如果使用身份验证）：

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
                app.UseCors(builder => {
                    builder.AllowAnyOrigin();
                    builder.AllowAnyHeader();
                    builder.AllowAnyMethod();
                });

            // etc...
        }

重要：在大多数情况下，上述配置对于开发来说是很好的，但有必要仔细评估上述配置对于生产是否安全，因为它允许任何基于浏览器的应用程序都可以调用您的API。