MVC 웹 API : 요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다.

이 기사에 쓰여진 모든 것을 시도했습니다 : http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api . angularJS를 사용하여 다른 도메인에서 사용하기 위해 webAPI2 (MVC5)에서 데이터를 가져 오려고합니다.

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

namespace tapuzWebAPI.Controllers
{
    [EnableCors(origins: "http://local.tapuz.co.il", headers: "*", methods: "*", SupportsCredentials = true)]
    [RoutePrefix("api/homepage")]
    public class HomePageController : ApiController
    {
        [HttpGet]
        [Route("GetMainItems")]
        //[ResponseType(typeof(Product))]
        public List<usp_MobileSelectTopSecondaryItemsByCategoryResult> GetMainItems()
        {


            HomePageDALcs dal = new HomePageDALcs();
            //Three product added to display the data

            //HomePagePromotedItems.Value.Add(new HomePagePromotedItem.Value.FirstOrDefault((p) => p.ID == id));


            List<usp_MobileSelectTopSecondaryItemsByCategoryResult> items = dal.MobileSelectTopSecondaryItemsByCategory(3, 5);
            return items;

        }      
    }
}

Web Api 에서 CORS 를 활성화해야합니다 . CORS를 전역 적으로 활성화하는 더 쉽고 선호되는 방법은 web.config에 다음을 추가하는 것입니다.

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

것을 바랍니다 노트 방법은 모두 개별적으로 사용하는 대신, 지정됩니다 *. 을 (를) 사용할 때 발생하는 버그가 있기 때문입니다 *.

코드로 CORS 를 활성화 할 수도 있습니다 .

업데이트
다음 NuGet 패키지가 필요합니다 Microsoft.AspNet.WebApi.Cors..

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();

        // ...
    }
}

그런 다음 다음 [EnableCors]과 같이 Actions 또는 Controllers에 속성을 사용할 수 있습니다.

[EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")]

또는 전 세계적으로 등록 할 수 있습니다.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("http://www.example.com", "*", "*");
        config.EnableCors(cors);

        // ...
    }
}

또한 Options 요청 으로 프리 플라이트 요청 을 처리해야 HTTP OPTIONS합니다.

Web API을 ( Options를) 지원하도록 구성되었는지 확인하기 위해 요청에 응답해야합니다 CORS.

이를 처리하기 위해 필요한 것은 빈 응답을 다시 보내는 것 입니다. 작업 내에서이를 수행하거나 다음과 같이 전역 적으로 수행 할 수 있습니다.

# Global.asax.cs
protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}

이 추가 검사는 오래된 보장하기 위해 추가되었습니다 APIs만 수용하도록 설계되었다 그 GET와 POST요청이 악용 할 수 없습니다 것이다. 이 동사 가 존재하지 않았을 때 설계자에게 DELETE요청을 보내는 것을 상상해보십시오 . 결과는 예측할 수 없으며 결과는 위험 할 수 있습니다 .API

@ Mihai-Andrei Dinculescu의 대답은 정확하지만 검색 자의 이익을 위해이 오류를 일으킬 수있는 미묘한 점도 있습니다.

URL 끝에 '/'를 추가하면 모든 인스턴스 (예 : 홈페이지에서)에서 EnableCors가 작동하지 않습니다.

즉 이것은 작동하지 않습니다

var cors = new EnableCorsAttribute("http://testing.azurewebsites.net/", "*", "*");
config.EnableCors(cors);

그러나 이것은 작동합니다.

var cors = new EnableCorsAttribute("http://testing.azurewebsites.net", "*", "*");
config.EnableCors(cors);

EnableCors 속성을 사용하는 경우 효과는 동일합니다.

나는 Mihai-Andrei Dinculescu가 지시 한 위의 모든 단계를 따랐습니다 .
그러나 제 경우 에는 Web.Config에서 http OPTIONS가 아래 줄에 비활성화되어 있기 때문에 한 단계 더 필요했습니다 .

<remove name="OPTIONSVerbHandler" />

방금 Web.Config에서 제거했으며 (아래처럼 주석 처리) Cors는 매력처럼 작동합니다.

<handlers>
  <!-- remove name="OPTIONSVerbHandler" / -->
</handlers>

Cors nuget 패키지 설치 때문일 수 있습니다.

nuget에서 cors를 설치하고 enabaling 한 후 문제가 발생하면 web Api를 다시 설치해보세요.

패키지 관리자에서 다음을 실행하십시오. Update-Package Microsoft.AspNet.WebApi -reinstall

CORS를 올바르게 구성했는지 확인하려면 다음을 시도하십시오.

[EnableCors(origins: "*", headers: "*", methods: "*")]

그래도 작동이 안되는? HTTP 헤더가 있는지 확인하십시오.

CORS 프로토콜이 작동하도록하려면 해당 헤더를 반환 할 모든 엔드 포인트 (또는이 메서드가있는 전역 필터)에 OPTIONS 메서드가 있어야합니다.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: content-type

그 이유는 브라우저가 먼저 OPTIONS 요청을 보내 서버를 '테스트'하고 인증을 확인하기 때문입니다.

cors에 대한 다음 사건을 잡았습니다. 누군가에게 유용 할 수도 있습니다. 'WebDav Redirector'기능을 서버에 추가하면 PUT 및 DELETE 요청이 실패합니다.

따라서 IIS 서버에서 'WebDAVModule'을 제거해야합니다.

• "IIS 모듈 구성에서 WebDAVModule을 반복합니다. 웹 서버에 있으면 제거하십시오."

또는 구성에 추가하십시오.

<system.webServer>
<modules>
  <remove name="WebDAVModule"/>
</modules>
<handlers>
  <remove name="WebDAV" />
  ...
</handlers>

나는 내가 이것에 매우 늦게 오는 것을 알고있다. 그러나 검색하는 모든 사람을 위해 마침내 나를 위해 일한 것을 게시 할 것이라고 생각했습니다. 나는 그것이 최선의 해결책이라고 주장하는 것이 아닙니다.

WebApi 서비스는 config.EnableCors (corsAttribute) 메서드를 사용합니다. 그러나 그것으로도 비행 전 요청에 여전히 실패합니다. @ Mihai-Andrei Dinculescu의 대답은 나에게 단서를 제공했습니다. 우선 그의 Application_BeginRequest () 코드를 추가하여 옵션 요청을 플러시했습니다. 그것은 여전히 ​​나를 위해 작동하지 않았습니다. 문제는 WebAPI가 여전히 OPTIONS 요청에 예상되는 헤더를 추가하지 않았다는 것입니다. 플러싱만으로는 효과가 없었지만 아이디어가 생겼습니다. OPTIONS 요청에 대한 응답에 web.config를 통해 추가 될 사용자 지정 헤더를 추가했습니다. 내 코드는 다음과 같습니다.

protected void Application_BeginRequest()
{
  if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
  {
    Response.Headers.Add("Access-Control-Allow-Origin", "https://localhost:44343");
    Response.Headers.Add("Access-Control-Allow-Headers",
      "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    Response.Headers.Add("Access-Control-Allow-Credentials", "true");
    Response.Flush();
  }
}

분명히 이것은 OPTIONS 요청에만 적용됩니다. 다른 모든 동사는 CORS 구성에 의해 처리됩니다. 이것에 대한 더 나은 접근 방식이 있다면 나는 모두 귀입니다. 그것은 나에게 속임수처럼 느껴지고 헤더가 자동으로 추가되는 것이 더 좋지만 이것이 마침내 효과가 있었고 계속 진행할 수있게 해주었습니다.

@ Mihai-Andrei Dinculescu의 답변이 저에게 효과적이었습니다.

• <httpProtocol>web.config에 추가<system.webServer> 섹션
• OPTIONS에 언급 된를 통해 요청에 대해 빈 응답을 반환 합니다 Application_BeginRequest().global.asax

그의 수표가 Request.Headers.AllKeys.Contains("Origin")나를 위해 작동하지 않았다는 것을 제외하고 는 요청에origing 에 소문자가 . 내 브라우저 (Chrome)가 CORS 요청에 대해 이와 같이 전송한다고 생각합니다.

대신 대소 문자를 구분하지 않는 변형을 사용하여 좀 더 일반적으로 해결했습니다 Contains. if (culture.CompareInfo.IndexOf(string.Join(",", Request.Headers.AllKeys), "Origin", CompareOptions.IgnoreCase) >= 0) {

web.config에 다음과 같이 security \ requestFiltering 노드가있는 경우 :

<security>
  <requestFiltering>
    <verbs allowUnlisted="false">
      <add verb="GET" allowed="true" />
      <add verb="POST" allowed="true" />
      <add verb="PUT" allowed="true" />
      <add verb="DELETE" allowed="true" />
      <add verb="DEBUG" allowed="true" />          
    </verbs>
  </requestFiltering>

이것도 추가했는지 확인하십시오

<add verb="OPTIONS" allowed="true" />

나는이 답변에 주어진 방법을 포함하여 인터넷에서 찾을 수있는 모든 것을 시도했습니다. 하루 종일 문제를 해결하려고 거의 노력한 끝에 매력처럼 저에게 효과가있는 해결책을 찾았습니다.

App_Start 폴더의 WebApiConfig 파일 에서 모든 코드 줄에 주석을 달고 다음 코드를 추가합니다.

`public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors();
        var enableCorsAttribute = new EnableCorsAttribute("*",
                                           "Origin, Content-Type, Accept",
                                           "GET, PUT, POST, DELETE, OPTIONS");
        config.EnableCors(enableCorsAttribute);
        // Web API routes
        config.MapHttpAttributeRoutes();

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

    public class BrowserJsonFormatter : JsonMediaTypeFormatter
    {
        public BrowserJsonFormatter()
        {
            this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
            this.SerializerSettings.Formatting = Formatting.Indented;
        }

        public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
        {
            base.SetDefaultContentHeaders(type, headers, mediaType);
            headers.ContentType = new MediaTypeHeaderValue("application/json");
        }
    }`

나는 사람들이 처음에는 이것이 매우 명백하다는 것을 알겠지만, 정말로 이것에 대해 생각합니다. 이것은 종종 당신이 뭔가 잘못한 경우에 발생할 수 있습니다.

예를 들어, 호스트 파일에 호스트 항목을 추가하지 않았기 때문에이 문제가 발생했습니다. 진짜 문제는 DNS 확인이었습니다. 또는 기본 URL이 잘못되었습니다.

ID 토큰이 한 서버에서 왔지만 다른 서버에서 사용하려고하면 때때로이 오류가 발생합니다.

리소스가 잘못되면 때때로이 오류가 발생합니다.

CORS 미들웨어를 체인에 너무 늦게 배치하면 이것을 얻을 수 있습니다.

WebApiCOnfig.cs, 제공자의 GrantResourceOwnerCredentials 메서드 및 컨트롤러 헤더 속성 등과 같이 CORS를 활성화하는 여러 장소를 피하십시오. 다음은 액세스 제어 허용 원본을 유발하는 목록입니다.

1. 사용하고있는 DB와의 상호 작용이 곤란한 Web.
2. AWS Cloud 웹 API와 DB의 VPC가 다른 경우.

아래 코드는 액세스 제어 허용 출처를 수정하기에 충분합니다. //app.UseCors가 구성 코드 라인의 맨 위에 있어야합니다.

   public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
            //All other configurations
        }
    }

이것은 내 문제를 늦추 었습니다.

이 문제는 다른 도메인이나 다른 포트에서 액세스하려고 할 때 발생합니다.

Visual Studio를 사용하는 경우 도구> NuGet 패키지 관리자> 패키지 관리자 콘솔로 이동합니다. 여기에 NuGet 패키지 Microsoft.AspNet.WebApi.Cors 를 설치해야합니다.

Install-Package Microsoft.AspNet.WebApi.Cors

그런 다음 PROJECT> App_Start> WebApiConfig에서 CORS를 활성화합니다.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        
        //Enable CORS. Note that the domain doesn't have / in the end.
        config.EnableCors(new EnableCorsAttribute("https://tiagoperes.eu",headers:"*",methods:"*"));

        ....

    }
}

성공적으로 설치되면 솔루션을 구축하면 충분합니다.