WebAPI의 CORS 문제

기본 컨트롤러가있는 간단한 webapi 프로젝트가 있습니다. 아약스 요청을 사용하여 html 페이지에서 동일한 값에 액세스해야합니다.WebAPI의 CORS 문제

요구 사항 :

토큰을 전달 토큰 방법
를 사용하여 토큰을 얻고 값을

클라이언트 측을 얻을 :

이 다음 내 HTML입니다 페이지에는 두 개의 버튼이 있습니다. 먼저 토큰을 얻고 수동으로 머리글을 업데이트하고 두 번째 단추를 사용하여 값을 가져옵니다.

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
     crossorigin="anonymous"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#btnToken").click(function() { 
       var loginData = { 
        grant_type: 'password', 
        username: '[email protected]', 
        password: 'MyPassword' 
       }; 

       $.ajax({ 
        type: 'POST', 
        url: "http://172.16.2.19:8080/Token", 
        datatype: 'json', 
        data: loginData, 
        success: function (result) { 
         alert(JSON.stringify(result)); 
         console.log(JSON.stringify(result)); 
        }, 
        error: function (error) { 
         alert(JSON.stringify(error)); 
        } 
       }); 
      }); 

      function setHeader(xhr) { 
       xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); 
       xhr.setRequestHeader('Authorization', 'bearer 2wj036uRh7i2DpGAhzNOHuxb1TZcRWVkq_xU3mKGh6e4sO4hdwqaoJLeAAf_hoQewwYxnauUyFXev15oLOybwGDm-KDm-6TXvOSnby-7zYkN7UxNgHlna00hfure3VLYhPclZrQT591qWtH9oeIjc3AyXwJE7N_qhfZxvJKPUp5lTgzVJ9SBbTBOlyKnirUvJxwIrEwKABoNuRW6PbveTGs9i4osCI19mtkG53XB87-g2nwiWu2d2aw12WlT9ShFgf70cDgJMh84KY9eG4Mn9I1EJ2SgZI_i1CSoHktx5W6L8NbZqfv-Nd8qb_tjcw_eIJxZk7RSIDF2p42nVnUNXWJSivgcxNKaTr0KTlmK7PPYLtyyWNiIejZHDlXyBexy_Rmases9TGkIT5h1cpF8E3VNg7zMYCMAflJDYH_0Lj0siQ4QfNAYKB0D3hreEd3qW13YEpWcsGaR2uBI5Qc1l3N44Fyc_d-zLJP_lX8jhYE'); 
      } 

      $("#btnData").click(function() { 

       $.ajax({ 
        type: 'GET', 
        url: "http://172.16.2.19:8080/api/values", 
        content_type: 'application/json; charset=utf-8', 
        beforeSend: setHeader, 
        success: function (result) { 
         alert(JSON.stringify(result)); 
         console.log(JSON.stringify(result)); 
        }, 
        error: function (error) { 
         alert(JSON.stringify(error)); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <button id="btnToken" name="btnToken">Token</button> 
    <button id="btnData" name="btnData">Data</button> 
</html>

서버 측 :

내가 코드에 CORS를 활성화하고

public static class WebApiConfig 
{ 
    public static void Register(HttpConfiguration config) 
    { 
     // Web API configuration and services 
     var cors = new EnableCorsAttribute("*", "*", "*"); 
     config.EnableCors(cors); 

     // Configure Web API to use only bearer token authentication. 
     config.SuppressDefaultHostAuthentication(); 
     config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); 

     // Web API routes 
     config.MapHttpAttributeRoutes(); 

     config.Routes.MapHttpRoute(
      name: "DefaultApi", 
      routeTemplate: "api/{controller}/{id}", 
      defaults: new { id = RouteParameter.Optional } 
     ); 
    } 
}

가 나는 또한 아래와 같이 glabal.asax에서 프리 플라이트 요청을 추가 내 apiconfig에 다음있다;

protected void Application_BeginRequest() 
    { 
     if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS") 
     { 
      Response.Headers.Add("Access-Control-Allow-Origin", "*"); 
      Response.Headers.Add("Access-Control-Allow-Headers", "Access-Control-Allow-Origin, Origin, Content-Type, Authorization"); 
      Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS"); 
      Response.Headers.Add("Access-Control-Max-Age", "1728000"); 
      Response.End(); 
     } 
    }

하지만 크롬을 체크인하면 콘솔에서 다음 오류가 발생합니다.

요청한 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다. 따라서 원본 'null'은 액세스가 허용되지 않습니다. 내가 IE를 사용하는 경우

오류가

원본 파일과 같습니다 액세스 제어 - 허용 - 원산지 헤더를 찾을 수 없습니다.

난 내가 잘못

당신은 당신의 EnableCors 방법에 EnableCostAttribute 인스턴스를 전달해야

출처

2017-11-20 Akhil

당신이 제공 할 수 있습니다 : 당신이 OAuthAuthorizationServerProvider를 사용하는 경우

using System.Net.Http; using System.Web.Http; using System.Web.Http.Cors; namespace WebService.Controllers { [EnableCors(origins: "*", headers: "*", methods: "*")] public class TestController : ApiController { // Controller methods not shown... } }

, 당신은이 같은 몇 가지를 수행하려고 할 수 있습니다

는

using System.Web.Http; namespace WebService { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // New code config.EnableCors(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } }

다음, TestController 클래스에 [EnableCors] 속성을 추가 추가 정보 : - 액세스하려는 컨트롤러. - 인증 할 때 또는 하드 코딩 된 인증 – codeplay

을 사용하여 값을 다시 가져 오려고 할 때 콘솔의 오류가 발생합니다. 안녕하세요, webapi 템플릿으로 기본적으로 생성되는 2 개의 계정 계정 및 값이 있습니다. – Akhil

무슨 짓을했는지 모르겠어요

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

출처

2017-11-20 10:27:29

내가 업데이트했습니다. 내 가치관은 이제 제대로 작동합니다. 하지만 토큰 요청에서 나는 같은 오류가 발생했습니다, 나는 게시물 요청을 의미합니다 – Akhil

파일을 엽니 다 App_Start/WebApiConfig.cs합니다. WebApiConfig.Register 메서드에 다음 코드를 추가합니다.

public class SimpleAuthorizationServerProvider : OAuthAuthorizationServerProvider 
    { 
     public override Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context) 
     { 
      context.Validated(); 
      return Task.FromResult<object>(null); 
     } 

     public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context) 
     { 
      context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); 



     } 
    }

출처

2017-11-20 10:56:13

값 컨트롤러 샘플 데이터에 액세스 할 수 있습니다. 하지만 토큰 방식 요청은 들어오지 않습니다. 그래서 토큰은 신분의 일부인 특정 컨트롤러에 넣을 수는 없다. – Akhil

@Akhil 나는 내 대답을 업데이트했다. –

감사합니다. 그러나 지금 나는 해결책을 얻었다. 나는 단순히 내 글로벌 파일에서 헤더를 제거하고 web.config에 추가한다. – Akhil

답변

관련 문제