오류: 요청 헤더 필드 Content-Type은 Access-Control-Allow-Headers에서 허용되지 않습니다.

오류: 요청 헤더 필드 Content-Type은 Access-Control-Allow-Headers에서 허용되지 않습니다.

vS2012를 이용하여 mvc4 웹 api 프로젝트를 만들었습니다.Cross-Origin Resource Sharing, "http://blogs.msdn.com/b/carlosfigueira/archive/2012/07/02/cors-support-in-asp-net-web-api-rc-version.aspx "을 해결하기 위해 다음 튜토리얼을 사용했습니다.성공적으로 작동하고 있으며, 클라이언트 측에서 서버 측으로 데이터를 성공적으로 게시하고 있습니다.

이후 프로젝트에서 Autherization을 구현하기 위해 다음 튜토리얼을 사용하여 OAuth2, "http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2011/03/18/oauth-2-0-for-mvc-two-legged-implementation.aspx "을 구현했습니다.요청을 받는 데 도움이 됩니다.클라이언트측 토큰입니다.

그런데 클라이언트 쪽에서 데이터를 올리면 "XMLHttpRequest can't load http://"라는 오류가 발생합니다. 요청 헤더 필드 Content-Type은 Access-Control-Allow-Headers에서 허용되지 않습니다."

내 고객측 코드는 다음과 같습니다.

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

내 api 컨트롤러는 다음과 같습니다.

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

    } 

내 webconfig 파일은 다음과 같습니다.

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

이 게시물에서 암시한 바와 같이 크롬의 오류: Access-Control-Allow-Headers에서는 Content-Type을 허용하지 않습니다. 이렇게 web.config에 헤더를 추가하면 됩니다.

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

교차 오리진 요청으로 인한 것일 가능성이 높지만 그렇지 않을 수도 있습니다.저는 API 디버깅을 하고 있었고,Access-Control-Allow-Origin로.*, 하지만 최근 버전의 크롬은 추가적인 헤더가 필요한 것 같습니다.PHP를 사용하는 경우 파일에 다음을 추가해 보십시오.

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

이미 사용하지 않았는지 확인합니다.header다른 파일에서, 그렇지 않으면 당신은 끔찍한 오류를 얻게 될 것입니다.자세한 내용은 문서를 참조하십시오.

위의 답변과 함께 작업한 오래된 스레드라는 것을 알고 있으며 다음 사항을 추가해야 했습니다.

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

그래서 내 머리글은 다음과 같습니다.

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

그리고 문제는 해결됐습니다.

Nginx에게는 이 헤더를 추가하는 것이 유일하게 효과가 있었습니다.

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

Access-Control-Allow-Origin 헤더와 함께:

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

그런 다음 nginx config를 다시 로드했고 잘 작동했습니다.크레딧 https://gist.github.com/algal/5480916 .

ASP를 사용하는 저의 경우 다른 답변과 다르게 같은 문제가 있었습니다.웹 API 서버를 개발하기 위한 NET.

나는 이미 군단을 허락했고 그것은 GET 요청에 효과가 있었습니다.POST 요청이 작동하도록 하려면 'Allow AnyHeader()' 및 'Allow AnyMethod()' 옵션을 Corp 옵션 목록에 추가해야 했습니다.

다음은 시작 클래스에서 관련 기능의 필수적인 부분입니다.

서비스 구성 방법:

    services.AddCors(options =>
    {
        options.AddPolicy(name: MyAllowSpecificOrigins,
                          builder =>
                          {
                              builder
                                  .WithOrigins("http://localhost:4200")
                                  .AllowAnyHeader()
                                  .AllowAnyMethod()
                                  //.AllowCredentials()
                                  ;
                          });
    });

메서드 구성:

        app.UseCors(MyAllowSpecificOrigins);

찾은 위치:

• https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1
• https://forums.asp.net/t/2168883.aspx?Request+header+field+content+type+is+not+allowed+by+Access+Control+Allow+Headers+in+preflight+response+

언급URL : https://stackoverflow.com/questions/12409600/error-request-header-field-content-type-is-not-allowed-by-access-control-allow