Angular/C# CORS 问题

Posted 2023-03-04

【中文标题】Angular/C# CORS 问题

【英文标题】：Angular/C# CORS Issue

【发布时间】：2015-08-23 13:52:33

【问题描述】：

我将客户端托管在 localhost:8080/ 上，服务器托管在 localhost:44302/ 上

我正在尝试链接到我的后端，但遇到了 CORS 问题。下面是我的 Angular http 请求

$http.post(url, data, 
    headers: 
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Methods': 'POST, OPTIONS'
             
).success(function (response) 
  // rest of the code
).error(function (err, status) 
  // rest of the code
);

在用 C# 编写的服务器端，我在响应中设置了以下内容

 Response.ContentType = "application/json";
 Response.AddHeader("Access-Control-Allow-Origin", "*");
 Response.AddHeader("Access-Control-Allow-Methods", "POST, OPTIONS");

即使设置了这些，我也收到以下错误

XMLHttpRequest 无法加载 https://localhost:44302/some_uri。 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:8080” 使用权。响应的 HTTP 状态代码为 400。

我错过了什么？

【问题讨论】：

你用什么做后端？ ASP.NET Web API？你把修改响应的代码放在哪里了？

是的，我正在使用 ASP.NET MVC，我将代码放在控制器中，从那里我将响应发回

【参考方案1】：

您不需要从 AngularJS 发送任何额外的标头。系统会自动为您发出预检请求。

要在 Web API 中启用所有跨域请求，您可以这样做：

安装 NuGet 包 Microsoft.AspNet.WebApi.Cors。

将以下代码添加到 WebApiConfig.cs：

    var corsAttr = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(corsAttr);

完全了解 CORS 值得花几分钟时间。我建议在这里阅读深入的教程：

http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

【讨论】：

虽然我不需要它来解决我的解决方案，但我会接受它，因为它为其他人提供了明确的解决方案。就我而言，我在某处使用了正确的 IP 而不是 localhost，并且由于一些 Microsoft 奇怪的 IP 问题，我看不到它。

【参考方案2】：

在您的应用程序级服务器端执行此操作 您的客户端应用程序无需更改

第 1 步：安装包 Microsoft.AspNet.WebApi.Cors

第 2 步：您可以从 HttpConfiguration 对象启用 cors - 适用于整个应用程序

public static void Register(HttpConfiguration config)
    
        // New code
        config.EnableCors();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/controller/id",
            defaults: new  id = RouteParameter.Optional 
        );
    

替代：

第 3 步：转到控制器添加以下属性 - 仅适用于 TestController

// Allow CORS for all origins. (Caution!)
[EnableCors(origins: "*", headers: "*", methods: "*")]

示例：

[EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
public class TestController : ApiController

    // Controller methods not shown...