Lỗi: Trường tiêu đề yêu cầu Loại-Nội dung không được Access-Control-Allow-Headers cho phép

Tôi đã tạo một dự án api web mvc4 bằng vS2012. Tôi đã sử dụng hướng dẫn sau để giải quyết Chia sẻ tài nguyên nhiều nguồn gốc "http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api- rc-version.aspx ". Nó đang hoạt động thành công và tôi đăng dữ liệu từ phía máy khách sang máy chủ thành công.

Sau đó để triển khai Autherization trong dự án của mình, tôi đã sử dụng hướng dẫn sau để triển khai OAuth2, "http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/18/oauth-2-0-for -mvc-hai-chân-thực hiện.aspx ". Điều này giúp tôi nhận được RequestToken ở phía máy khách.

Nhưng khi tôi đăng dữ liệu từ phía máy khách, tôi gặp lỗi "XMLHttpRequest không thể tải http: //. Trường tiêu đề yêu cầu Content-Type không được Access-Control-Allow-Headers cho phép".

Mã phía khách hàng của tôi trông giống như,

 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.');            
                }
        });
    };

Bộ điều khiển api của tôi trông giống như,

    [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;
        }

    } 

Tệp webconfig của tôi trông giống như,

 <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" />

Như được gợi ý bởi bài đăng này Lỗi trong chrome: Content-Type không được Access-Control-Allow-Headers cho phép, chỉ cần thêm tiêu đề bổ sung vào web.config của bạn như vậy ...

<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>

Rất có thể đó là do yêu cầu nguồn gốc chéo , nhưng cũng có thể không. Đối với tôi, tôi đã gỡ lỗi một API và đã thiết lập Access-Control-Allow-Originđể *, nhưng có vẻ như các phiên bản gần đây của Chrome được đòi hỏi một tiêu đề phụ. Hãy thử thêm phần sau vào tệp của bạn nếu bạn đang sử dụng PHP:

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

Đảm bảo rằng bạn chưa sử dụng headertrong tệp khác, nếu không bạn sẽ gặp lỗi khó chịu. Xem tài liệu để biết thêm.

Tôi biết đó là một chuỗi cũ mà tôi đã làm việc với câu trả lời ở trên và phải thêm:

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

Vì vậy, tiêu đề của tôi trông giống như:

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');

Và vấn đề đã được khắc phục.

Đối với Nginx, điều duy nhất phù hợp với tôi là thêm tiêu đề này:

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';

Cùng với tiêu đề Access-Control-Allow-Origin:

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

Sau đó, tải lại cấu hình nginx và nó hoạt động tốt. Tín dụng https://gist.github.com/algal/5480916 .