Angular/C# CORS 问题答案

【问题标题】：Angular/C# CORS IssueAngular/C# CORS 问题
【发布时间】：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，我将代码放在控制器中，从那里我将响应发回

标签： javascript c# angularjs cors

【解决方案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...
}

【讨论】：