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

【问题标题】：CORS request failed between containerized React and C# applications容器化 React 和 C# 应用程序之间的 CORS 请求失败
【发布时间】：2021-10-18 14:45:32
【问题描述】：

使用我在 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);

            ...
        }

【问题讨论】：

“CORS 请求未成功” 错误消息实际上表明问题与 CORS 无关。我的字面意思是浏览器未能成功完成请求。或者换句话说，这意味着事务从未到达服务器实际响应的点。因此，它通常可以指示网络级别的故障，而不是服务器级别的故障。见developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/…
这就解释了，非常感谢。我会仔细检查我正在使用的方案，并在没有广告拦截器的其他浏览器上尝试

标签： c# docker docker-compose cors

【解决方案1】：

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

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

            // etc...
        }

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

【讨论】：