访问控制允许来源头部有多个值或preflight jQuery的阿贾克斯网页API 2 [英] Access-Control-Allow-Origin header has multiple values OR Preflight jquery ajax to Web Api 2

问题描述

我有一个 asp.net web表单应用程序的本地主机上运行：6414 和 jQuery的AJAX 调用了网页API服务在本地主机：11974

我收到错误

 访问控制允许原产地头包含多个值'*，*'，但只有一个是允许的。原产地的http：//本地主机：6414'因此不允许访问。
 

于是我通过梳理的谷歌和计算器并找到吨冲突的 信息

  1。与web.config中修复
2.修正使用jQuery ajax调用
3.解决了在web.api CORS
 

我曾尝试在一个Cors 启用和的web.config 和各种技术

目前我不知道这个问题实际上是Web表单的jQuery code作为发件人，但实际响应头就意味着它是从Web API服务...

我看我的响应头和我看到的这2

 访问控制允许来源：*（重复两次）
 

我尝试注释掉在web.config中这一行的Web API项目

 ＆LT;添加名称=访问控制允许来源VALUE =*/＆GT;
 

然后我得到这401错误：

 无'访问控制允许来源标头的请求的资源present。原产地的http：//本地主机：6414'因此不允许访问。响应有HTTP状态code 401。
 

我有在web.config中这个code

 ＆LT;身份验证模式=窗口/＆GT;
＆LT;授权＆GT;
  ＆LT;允许动词=OPTIONS用户=*/＆GT;
  ＆LT;拒绝用户=？ /＆GT;
＆LT; /授权＆GT;
 

现在，如果我的取消注释在访问控制。 ...在的web.config ，然后的注释出的 CORS $ C $在C WebApiConfig 的.cs

  VAR CORS =新EnableCorsAttribute（*，*，*）;
config.EnableCors（CORS）;
 

如果是code是那么注释掉我得到preflight误差

  XMLHtt prequest无法加载的http：//本地主机：11974 / PostCheckBox。为preflight响应具有无效的HTTP状态code 405
 

  

这似乎完全疯了。

jQuery的code

 函数sendCheckboxes（ID，出来，是，否）{
            // $（函数（）{
            //变种风暴= {ID：1902年，StormOut：1，StormYes：1，StormNo：1};
            VAR风暴= {ID：ID，StormOut：出来，StormYes：是的，StormNo：无};
            //jQuery.support.cors = TRUE;
            $阿贾克斯（{
                键入：POST，
                数据：JSON.stringify（风暴），
                网址：HTTP：//本地主机：11974 / PostCheckBox
                的contentType：应用/ JSON
                //跨域：真实，
                成功：功能（数据）{
                    的console.log（数据）
                }，
                错误：函数（X，Y，Z）{
                    的console.log（X +的'\\ n'+ Y +的'\\ n'+ Z）;
                }
            }）;            //}）;
        }
 

网页API方法

  [路线（PostCheckBox）]
公众的Htt presponseMessage PostCheckBox（[FromBody] StormData风暴）
    {} ....
 

如果我把这个方法从同一域中（本地主机上现在相同的端口），它正常工作

 的http：//本地主机：11974 / checkbox.html
 

是什么给了...

解决方案

您正在争夺您的的web.config

注释掉所有你添加到web.config中的废话！

 ＆LT;身份验证模式=窗口/＆GT;
    ＆LT;授权＆GT;
      ＆LT;允许动词=OPTIONS用户=*/＆GT;
      ＆LT;拒绝用户=？ /＆GT;
 ＆LT; /授权＆GT;
 

我不使用，我敢肯定这是问题1
另一种是，你需要的注释

 ＆LT;添加名称=访问控制允许来源VALUE =*/＆GT;
 

然后的确实使用的这些行

  VAR CORS =新EnableCorsAttribute（*，*，*）;
config.EnableCors（CORS）;
 

您可以随时添加安全，认证和授权，并有一个Cors细节要求不是全球性的，但对类或方法，但如果你有一个艰难的时间与刚开工作，那么这的确应该工作的事情。

I have a asp.net web forms application running on localhost:6414 Then the jquery ajax calls up a Web Api service on localhost:11974

I receive the error

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'http://localhost:6414' is therefore not allowed access. 

So I comb through google and stackoverflow and find tons of conflicting information.

1. Fix with web.config   
2. Fix with jquery ajax call
3. Fix with CORS in web.api 

I have tried the Cors enabled and web.config and all sorts of techniques.

Currently I wonder if the problem is actually the web forms jquery code as the sender, but actually the response headers would mean it is from the web api service...

I look at my Response Headers and I see 2 of these

Access-Control-Allow-Origin:*  ( repeated TWICE)

I try to comment out this line in web.config in Web Api Project

<add name="Access-Control-Allow-Origin" value="*" />

THEN I get this 401 error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:6414' is therefore not allowed access. The response had HTTP status code 401.

I do have this code in web.config

<authentication mode="Windows" />
<authorization>
  <allow verbs="OPTIONS" users="*" />
  <deny users="?" />
</authorization>

Now if I uncomment the Access-Control.... in web.config and THEN comment out the CORS code in WebApiConfig.cs

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

If that code is commented out THEN I get preflight error

 XMLHttpRequest cannot load http://localhost:11974/PostCheckBox. Response for preflight has invalid HTTP status code 405

This seems completely insane.

Jquery code

function sendCheckboxes(id, out, yes, no) {
            //$(function () {
            //var storm = { id: 1902, StormOut: 1, StormYes: 1, StormNo: 1 };
            var storm = { id: id, StormOut: out, StormYes: yes, StormNo: no };
            //jQuery.support.cors = true;
            $.ajax({
                type: "POST",
                data: JSON.stringify(storm),
                url: "http://localhost:11974/PostCheckBox",
                contentType: "application/json",
                //crossDomain: true,
                success: function (data) {
                    console.log(data)
                },
                error: function (x, y, z) {
                    console.log(x + '\n' + y + '\n' + z);
                }
            });

            //});
        }

Web api method

[Route("PostCheckBox")]
public HttpResponseMessage PostCheckBox([FromBody] StormData storm) 
    {.... }

If I call this method up from same domain (for now same port on localhost) It works fine

http://localhost:11974/checkbox.html

What gives...

解决方案

You are battling your web.config

Comment out all the crap you added to web.config!

 <authentication mode="Windows" />
    <authorization>
      <allow verbs="OPTIONS" users="*" />
      <deny users="?" />
 </authorization>

I do not use that and I am SURE that that is 1 issue Also another is that you need to comment out

<add name="Access-Control-Allow-Origin" value="*" />

and then DO USE these lines

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

You can always add in security , authentication and authorization and have Cors specifics request not global but on Class or Method, but if you are having a tough time with just getting the thing to work then this should indeed work.

这篇关于访问控制允许来源头部有多个值或preflight jQuery的阿贾克斯网页API 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！