Angular 或 Angular 6 中的跨域资源共享 (CORS)。在 localhost 上使用不同端口进行跨域调用时出现问题

Posted 2023-02-27

【中文标题】Angular 或 Angular 6 中的跨域资源共享 (CORS)。在 localhost 上使用不同端口进行跨域调用时出现问题

【英文标题】：Cross Origin Resource Sharing (CORS) in Angular or Angular 6. Problem while you make cross domain calls on localhost with different ports

【发布时间】：2019-04-30 21:41:27

【问题描述】：

我遇到了一种情况，我从我的 Angular 6 应用程序调用我的 Spring Boot 应用程序。当我以角度调用在不同端口上运行的应用程序的 HTTP post 方法时，它会引发异常。

从源“http://localhost:4200”访问位于“http://localhost:8080/api”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

我的 Angular 应用程序在“http://localhost:4200”端口号：4200 上运行 我的 Spring Boot 应用程序在“http://localhost:8080/api”上运行：端口号：8080。

没有解决这个问题的直接答案。很少有黑客可以禁用 chrome 中的安全性，使用 nginx 可以解决此问题。

【参考方案1】：

解决上述问题

首先你需要共享4200端口的Spring boot资源。在类或方法上标注@CrossOrigin(origins = "http://localhost:4200")要共享的资源.

你必须在 Angular 应用程序中配置代理。因此，在 Angular 根应用程序中创建一个 proxy.json 文件。内容如下

"/api/*": 
    "target": "http://localhost:8080",
    "secure": "false",
    "logLevel": "debug",
    "changeOrigin": true

然后运行ng serve --proxy-config proxy.json这个命令它将编译代码。您应该在控制台上看到类似的内容。

building modules 3/3 modules 0 active[HPM] Proxy created: /api -> 
http://localhost:8080 Subscribed to http-proxy events: [ 'error', 'close' ]

【参考方案2】：

就像你在运行 Angular 和 web api 时一样，但它们是在两个端口上运行的。您需要在服务器上启用 CORS 策略。

如果您使用的是 web api，请在您的项目中启用 cors 策略，它将解决您的问题。

【讨论】：

我正在渲染有关 Angular 应用程序的 s-s-rS 报告并收到跨域错误，因为我的应用程序在 localhost 上运行而 s-s-rs 报告服务器在其他域上。我需要在 s-s-rs 服务器端启用 CORS，但不知道该怎么做。你有什么想法吗。

【参考方案3】：

在startup.cs类中，在ConfigureServices和Configure()两个方法中添加如下语句。 该解决方案无需在 Web 浏览器上安装 CORS，即可与我一起使用：

public void ConfigureServices(IServiceCollection services)
    
        // Add policy for CORS
        services.AddCors(options =>
        
            options.AddPolicy("AllowAll",
                builder =>
                
                    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials();
                );
        );

       // You additional configurations here....


public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    
        app.UseCors("AllowAll"); // Add this line here or inside if (env.IsDevelopment()) block

        if (env.IsDevelopment())
        
            // app.UseCors("AllowAll");
            app.UseDeveloperExceptionPage();
        

【讨论】：

我们正在寻找它的 .NET Core Angular 6++

【参考方案4】：

前几天我和 cors 做噩梦了，所以我改变了我的编程范式。

对于我正在开发的 Web 应用程序，最终我将部署到生产环境中，在这种情况下，我使用 Heroku，您可以使用 GCP 或类似名称。为了处理像 http 这样的服务器端的东西，我使用Postman 来测试所有的 http 路由，邮递员不会被 cors 阻止。它还可以将它们快速发送到一个有组织的文件夹中，而不是填写整个用例来获取 HTTP 请求。

完成并验证单元测试后，我将服务器部署到 Heroku，然后在客户端上工作。这样，客户端向 Elsweyr 的服务器发出请求并且不接收 cors。

【参考方案5】：

我在 http://localhost:4200 上运行一个本地 Angular 8 应用程序，该应用程序进行 REST 调用 我的 Spring Boot 应用程序也在 http://localhost:8101 上本地运行，我在尝试运行 POST REST 调用时遇到了同样的错误）。我刚刚将“@CrossOrigin”注释添加到我的@RestController 类的顶部并且它起作用了