Fehler: Anforderungsheaderfeld Inhaltstyp wird von Access-Control-Allow-Headern nicht zugelassen

101

Ich habe mit vS2012 ein mvc4-Web-API-Projekt erstellt. Ich habe das folgende Tutorial verwendet, um die Cross-Origin Resource Sharing zu lösen: "http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api- rc-version.aspx ". Es funktioniert erfolgreich und ich poste Daten von der Client-Seite erfolgreich auf dem Server.

Danach habe ich für die Implementierung der Autherisierung in meinem Projekt das folgende Lernprogramm verwendet, um OAuth2 zu implementieren: "http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/18/oauth-2-0-for -mvc-zweibeinige Implementierung.aspx ". Dies ist eine Hilfe, um RequestToken auf der Clientseite zu erhalten.

Aber wenn ich Daten von der Clientseite poste, erhalte ich die Fehlermeldung "XMLHttpRequest kann http: // nicht laden. Anforderungsheaderfeld Inhaltstyp wird von Access-Control-Allow-Headern nicht zugelassen."

Mein clientseitiger Code sieht aus wie:

 function PostLogin() {
    var Emp = {};            
    Emp.UserName = $("#txtUserName").val();             
    var pass = $("#txtPassword").val();
    var hash = $.sha1(RequestToken + pass);
            $('#txtPassword').val(hash);
    Emp.Password= hash;
    Emp.RequestToken=RequestToken;
    var createurl = "http://localhost:54/api/Login";
    $.ajax({
        type: "POST",
        url: createurl,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(Emp),
        statusCode: {
                200: function () {
                $("#txtmsg").val("done");                       
                toastr.success('Success.', '');                         
                }
                },
        error:
            function (res) {                        
                toastr.error('Error.', 'sorry either your username of password was incorrect.');            
                }
        });
    };

Mein API-Controller sieht aus wie:

    [AllowAnonymous]
    [HttpPost]
    public LoginModelOAuth PostLogin([FromBody]LoginModelOAuth model)
    {
        var accessResponse = OAuthServiceBase.Instance.AccessToken(model.RequestToken, "User", model.Username, model.Password, model.RememberMe);

        if (!accessResponse.Success)
        {
            OAuthServiceBase.Instance.UnauthorizeToken(model.RequestToken);
            var requestResponse = OAuthServiceBase.Instance.RequestToken();

            model.ErrorMessage = "Invalid Credentials";

            return model;
        }
        else
        {
            // to do return accessResponse

            return model;
        }

    } 

Meine webconfig- Datei sieht aus wie:

 <configuration>
   <configSections>   
   <section name="entityFramework"    type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=4.4.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
  <section name="oauth" type="MillionNodes.Configuration.OAuthSection, MillionNodes, Version=1.0.0.0, Culture=neutral"/>
  <sectionGroup name="dotNetOpenAuth" type="DotNetOpenAuth.Configuration.DotNetOpenAuthSection, DotNetOpenAuth.Core">
  <section name="messaging" type="DotNetOpenAuth.Configuration.MessagingElement, DotNetOpenAuth.Core" requirePermission="false" allowLocation="true" />
  <section name="reporting" type="DotNetOpenAuth.Configuration.ReportingElement, DotNetOpenAuth.Core" requirePermission="false" allowLocation="true" />
</sectionGroup>
</configSections>
<oauth defaultProvider="DemoProvider" defaultService="DemoService">
<providers>
  <add name="DemoProvider" type="MillionNodes.OAuth.DemoProvider, MillionNodes" />
</providers>
<services>
  <add name="DemoService" type="MillionNodes.OAuth.DemoService, MillionNodes" />
</services>
</oauth>
<system.web>
 <httpModules>
   <add name="OAuthAuthentication" type="MillionNodes.Module.OAuthAuthenticationModule, MillionNodes, Version=1.0.0.0, Culture=neutral"/>
  </httpModules>
 <compilation debug="true" targetFramework="4.0" />
<authentication mode="Forms">
  <forms loginUrl="~/Account/Login" timeout="2880" />
</authentication>
<pages>
  <namespaces>
    <add namespace="System.Web.Helpers" />
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Optimization" />
    <add namespace="System.Web.Routing" />
    <add namespace="System.Web.WebPages" />
  </namespaces>
</pages>
</system.web>
<system.webServer>
 <validation validateIntegratedModeConfiguration="false" />      
  <modules>
      <add name="OAuthAuthentication"     type="MillionNodes.Module.OAuthAuthenticationModule, MillionNodes, Version=1.0.0.0, Culture=neutral" preCondition="" />
 </modules>
 <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
  </httpProtocol>
</system.webServer>
<dotNetOpenAuth>
<messaging>
  <untrustedWebRequest>
    <whitelistHosts>
      <!-- Uncomment to enable communication with localhost (should generally not activate in production!) -->
      <!--<add name="localhost" />-->
    </whitelistHosts>
  </untrustedWebRequest>
</messaging>
<!-- Allow DotNetOpenAuth to publish usage statistics to library authors to improve the library. -->
<reporting enabled="true" />

Kishore
quelle
Werfen Sie einen Blick auf diese stackoverflow.com/questions/5027705/… und fügen Sie eine weitere Regel in Ihre Webkonfiguration ein
Mark Jones
Hallo, testest du dieses js direkt von deinem Browser und dem lokalen Dateisystem, zB file: // URL. ?? Und von welchem ​​Browser?
Mark Jones

Antworten:

170

Wie in diesem Beitrag angedeutet Fehler in Chrome: Der Inhaltstyp wird von Access-Control-Allow- Headern nicht zugelassen. Fügen Sie einfach den zusätzlichen Header wie folgt zu Ihrer web.config hinzu ...

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
  </customHeaders>
</httpProtocol>
Mark Jones
quelle
Danke für die Antwort. Es wurde versucht, aber ich bekam die Fehlermeldung "XMLHttpRequest kann localhost nicht laden : 54 / api / Login . Origin null ist von Access-Control-Allow-Origin nicht zulässig."
Kishore
Ich habe immer noch kein Glück damit, ich habe hier im Detail gepostet: stackoverflow.com/questions/12437748/…
Kishore
112

Dies ist höchstwahrscheinlich auf eine Anfrage zwischen verschiedenen Ursprüngen zurückzuführen , ist dies jedoch möglicherweise nicht der Fall. Für mich, ich hatte eine API wurde das Debuggen und hatte das Access-Control-Allow-Originzu *, aber es scheint , dass die jüngsten Versionen von Chrome einen zusätzlichen Header erfordern. Versuchen Sie, Ihrer Datei Folgendes voranzustellen, wenn Sie PHP verwenden:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Stellen Sie sicher, dass Sie noch nicht headerin einer anderen Datei verwendet haben, sonst wird ein böser Fehler angezeigt. Weitere Informationen finden Sie in den Dokumenten .

user1429980
quelle
3
Warum deckt das Sternchen nicht alles ab - -;
user2483724
3
@ user2483724 Das liegt daran, dass das Sternchen jede Origin-Domäne zulässt, aber nicht angibt, welche zusätzlichen Header zulässig sind. Es heißt nur: "Sie können dieses Skript von einer Seite aus aufrufen, die an einer anderen Stelle ausgeführt wird"
Garet Claborn,
18

Ich weiß, dass es ein alter Thread ist, mit dem ich oben gearbeitet habe und den ich hinzufügen musste:

header('Access-Control-Allow-Methods: GET, POST, PUT');

Mein Header sieht also so aus:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');

Und das Problem wurde behoben.

Danny22
quelle
10

Für Nginx hat das einzige, was für mich funktioniert hat, das Hinzufügen dieses Headers:

add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';

Zusammen mit dem Access-Control-Allow-Origin-Header:

add_header 'Access-Control-Allow-Origin' '*';

Dann die Nginx-Konfiguration neu geladen und es hat super funktioniert. Gutschrift https://gist.github.com/algal/5480916 .

Nick Woodhams
quelle