angular - Kubernetes 内部服务之间的 CORS 问题

Question

我试图从我的前端部署/pod(在 NGINX 中运行的 Angular 7 应用程序)向我的后端服务(NET Core WEB API)发出一个 http 请求。

如图所示，URL 是 http://k8s-demo-api:8080/api/data .

//environment.prod.ts in Angular App

export const environment = {
  production: true,
  api_url: "http://k8s-demo-api:8080/api"
};

我在我的 API 中启用了 CORS:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using K8SDockerCoreWebApi.Contexts;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;

namespace K8SDockerCoreWebApi
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors();
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.Add(new ServiceDescriptor(typeof(K8SDemoContext), new K8SDemoContext(Configuration.GetConnectionString("DefaultConnection"))));
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

            app.UseCors( options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
            app.UseMvc();
        }
    }
}

所以问题来了，当我提出请求时，我在 Angular 端收到以下控制台错误:



如果上面的图像有任何问题，则错误基本上是:

Access to XMLHttpRequest at 'k8s-demo-api:8080/api/data' from origin 'http://192.168.99.100:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

注意事项:

集群中的所有其他服务都可以正常通信(即 WEB API 与 MySQL 使用相同的方法)

当我在本地运行这两个容器时，它们可以相互通信

当我单独访问这两个服务时，它们都运行 100%

我正在考虑在 API 上实现一个入口，但我对这将完成什么的理解是有限的。

任何帮助将不胜感激。谢谢。

编辑

我使用以下 header 作为我的 Angular 请求的一部分:

headers: new HttpHeaders({
  'Content-Type': 'application/json',
  'X-Requested-With': 'XMLHttpRequest',
  'Access-Control-Allow-Origin' : '*'
})

Answer 1

虽然乍一看很简单，但有很多方法可以解决您的问题。首先是关于 CORS 的一些背景知识:浏览器会自动添加 X-Requested-With header ，无需在您的 Angular 请求中添加它。浏览器将在响应 header 中查找 Access-Control-Allow-Origin - 否则您可以告诉浏览器信任任何东西，这正是 CORS 所阻止的。 (服务器端必须决定是否允许请求)
所以，如果你想启用 CORS，你需要在你的 asp.net 应用程序中配置它，你做了

        app.UseCors( options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

但是您不需要 CORS - 您的设置经过精心构建以避免需要:CORS 只会在您发出跨域请求时激活。您以这种方式配置了 nginx 反向代理，您可以从加载 Angular 应用程序的同一源请求 API。

这不起作用的原因是您的浏览器无法连接到内部 kubernetes 主机名 k8s-demo-api因为这是 Kubernetes 集群中的内部名称。

我假设您在前端 pod 的容器中添加了一个 hostPort，并且 nginx 在端口 4200 上运行，为根路径上的 Angular 应用程序提供服务，反向代理路径是 /api .

最简单的解决方案，假设您的其余设置正常工作:更改 API 的 URL 以使用创建的反向代理路径

 api_url: "http://192.168.99.100:4200/api"

从屏幕截图看来，您正在尝试在没有正确协议(protocol)(本例中为 http://)的情况下请求 api，请确保正确配置了 Angular HttpClient。