跨域 localhost:port 请求被拒绝，$http angularjs 请求到 web api答案

【问题标题】：cross domain localhost:port request denied with $http angularjs request to web api跨域 localhost:port 请求被拒绝，$http angularjs 请求到 web api
【发布时间】：2017-01-16 05:51:47
【问题描述】：

由 ASP.NET 服务器托管的 angular js。调用 web api。什么时候 POST web api 没有参数然后工作。但是当将参数传递给 POST web api 时，它会给出以下错误。错误： XMLHttpRequest 无法加载 http://localhost:60117/api/Parts。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin http://localhost:64658 因此不允许访问。

注意：已经启用 cors nuget。 [EnableCors("*", "*", "*")] 下面是webapiconfig.cs中的代码

var cors = new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);

以下是我的请求标头：

OPTIONS /api/Parts HTTP/1.1
Host: localhost:60117
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:64658
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36    (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:64658/app/views/Index.html
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

然后在 web.config 中执行以下代码时，给出多个接受动词错误。

<httpProtocol>
    <customHeaders>
        <clear/>
        <add name="Access-Control-Expose-Headers " value="WWW-Authenticate"/>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, PATCH, DELETE"/>
        <add name="Access-Control-Allow-Headers" value="accept, authorization, Content-Type"/>
        <remove name="X-Powered-By"/>
    </customHeaders>
</httpProtocol>

更新：

Now getting below request response message:

The requested resource does not support http method 'POST'.

AJAX 调用：

$http({
        method: "POST",                       
        url: config.APIURL + 'Parts',
        data: {'final':'final'}                       
});

请帮帮我。被这个问题卡住了。

【问题讨论】：

标签： javascript angularjs ajax asp.net-web-api asp.net-web-api2

【解决方案1】：

端口差异被视为跨域 (xdomain) 请求，因此某些浏览器会发送预检 OPTIONS 请求。

您需要设置您的服务器以接受这些请求并返回200 OK 根据以下网址

http://enable-cors.org/server_aspnet.html

【讨论】：

已经在 webapiconfig 中启用核心以及在控制器级别启用核心。虽然没有运气。
你缺少标题Access-Control-Allow-Origin，也许添加请求响应以便我们可以给你一个更好的答案，我看到配置代码被注释掉了 -  我希望你在现实中删除cmets
已将 web.config 设置为 system.webserver - <add name="Access-Control-Allow-Origin" value="*" />now 出现错误：在预检响应中 Access-Control-Allow-Headers 不允许请求标头字段 Content-Type。
该错误告诉您确切的操作，您需要删除OPTIONS 调用的Content-Type 标头
我已删除内容类型。使用 ajax 调用请求编辑问题。但得到相同。Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight respo

【解决方案2】：

如果你的尝试没有成功，你可以试试这个。在您的 WebApi 的 Globax.asax 中，具有以下方法

protected void Application_BeginRequest()
        {
            if (Context.Request.HttpMethod == "OPTIONS")
            {
                Context.Response.AddHeader("Access-Control-Allow-Origin", Context.Request.Headers["Origin"]);
                Context.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                Context.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");                    
                Context.Response.End();
            }
    }

并且在您的 WebApi Config 中有以下方法调用来启用 cors

  config.EnableCors();

并且在您的控制器中具有类似于

的属性

[EnableCors(origins: "*", headers: "*", methods: "*")]

希望这会有所帮助。您也可以参考此网站https://msdn.microsoft.com/en-us/magazine/dn532203.aspx 了解更多详情。谢谢

【讨论】：

【解决方案3】：

您需要在服务器端添加CorsMessageHandler 类以允许HTTP 请求。

【讨论】：