IT

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

itgroup 2023. 2. 10. 21:44
반응형

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

이 기사에 기재되어 있는 모든 것을 시험해 보았습니다.http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api, 에서는 아무것도 동작하지 않습니다.웹에서 데이터를 가져오려고 합니다.angular를 사용하여 다른 도메인에서 사용하는 API2(MVC5)JS.

컨트롤러의 외관은 다음과 같습니다.

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;

        }      
    }
}

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>

Methods는 모두 를 사용하는 대신 개별적으로 지정된다는 점에 유의하시기 바랍니다.*, 용용시시시 . . . . . . . . . . .를 사용할 때 버그가 발생했기 때문입니다.를 사용할 때 했기 때문입니다*.

코드로 CORS 를 유효하게 할 수도 있습니다.


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

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

        // ...
    }
}

다음 '어울리다'를 .[EnableCors]

[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 끝에 '/'를 추가하면 모든 인스턴스(예: 홈페이지)에서 EnableCor가 작동하지 않습니다.

즉, 이 방법은 작동하지 않습니다.

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

이 방법은 유효합니다.

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

EnableCors Atribute를 사용해도 효과는 동일합니다.

나는 Mihai-Andrei Dinculescu가 제시한 위의 모든 단계를 따랐다.
하지만 제 경우 웹에서 http OPTIONS가 비활성화되어 있었기 때문에 한 단계진행해야 했습니다.다음 행으로 설정합니다.

<remove name="OPTIONSVerbHandler" />

방금 웹에서 삭제했습니다.구성(아래와 같이 코멘트만)과 Cors는 매력적으로 기능합니다.

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

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

nuget에서 cors를 설치하고 활성화한 후 문제가 발생할 경우 웹 API를 다시 설치해 볼 수 있습니다.

에서 " " " 를 실행합니다.Update-Package Microsoft.AspNet.WebApi -reinstall

CORS 가 올바르게 설정되어 있는 것을 확인하려면 , 다음의 순서를 실행합니다.

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

아직도 안 돼?HTTP 헤더의 존재를 확인합니다.

내가 이렇게 늦게 오는 거 알아.하지만 찾는 사람들을 위해, 저는 마침내 제게 효과가 있었던 것을 출판하려고 생각했습니다.나는 그것이 가장 좋은 해결책이라고 주장하는 것이 아니다. 단지 효과가 있었다.

WebApi 서비스는 이 설정을 사용합니다.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 설정으로 처리됩니다.더 나은 방법이 있다면, 난 귀 기울여 듣겠어.그것은 나에게 치팅처럼 느껴지고 헤더가 자동으로 추가되었으면 좋겠지만, 이것이 결국 효과가 있었고, 다음으로 넘어갈 수 있게 해주었다.

임의의 CORS 프로토콜을 동작시키려면 모든 엔드포인트에 OPTIONS 메서드(또는 이 메서드를 사용하는 글로벌필터)가 있어야 합니다.

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

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

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

Visual Studio를 사용하는 경우 [Tools]> [ NuGet Package Manager ]> [ Package Manager Console ]으로 이동합니다.NuGet 패키지 Microsoft 를 인스톨 할 필요가 있습니다.AspNet.WebApi.코르스

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:"*"));

        ....

    }
}

설치가 완료되면 솔루션을 구축하면 충분합니다.

코스에 관한 다음 사건은 내가 맡지누군가에게 도움이 될지도 몰라요.서버에 'WebDav Redirector' 기능을 추가하면 PUT 및 DELETE 요청이 실패합니다.

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

  • "IIS 모듈 구성에서 WebDAVMochedule을 루프업합니다. 웹 서버에 WebDAVMochedule이 있으면 제거합니다."

또는 설정에 추가합니다.

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

@Mihai-Andrei Dinculescu의 답변은 나에게 효과가 있었다. 예:

  • 의 추가<httpProtocol> web.config's에 <system.webServer> 표시
  • :OPTIONS의 「」를 시킨 Application_BeginRequest()global.asax

하지만 그의 수표는Request.Headers.AllKeys.Contains("Origin")이 요청에는 다음 항목이 포함되어 있었기 때문에, 나에게는 효과가 없었습니다.origing 소문자와 소소소 , , , , , , , , , , , , , , , ,.제 브라우저(Chrome)에서 CORS 요청용으로 이렇게 보내드린다고 생각합니다.

대소문자를 구분하지 않는 변형을 사용해서 좀 더 일반적인 방법으로 이 문제를 해결했어요Contains확인하세요: check대 확 、 check check 、 check check check check check check 。 if (culture.CompareInfo.IndexOf(string.Join(",", Request.Headers.AllKeys), "Origin", CompareOptions.IgnoreCase) >= 0) {

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

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, Grant Resource Owner Credentials 메서드 및 Controller Header Atribute 등 여러 장소에서 CORS를 활성화하지 않도록 합니다.액세스 제어의 허가 기점이 되는 원인이 되는 리스트는 다음과 같습니다.

  1. 사용하던 DB와 상호 작용 시 트러블이 있는 웹입니다.
  2. AWS 클라우드 웹 API와 DB의 VPC가 다른 경우.

아래 코드는 액세스 제어 허용 원점을 수정하기에 충분합니다. //앱을 확인하십시오.UseCors는 구성 코드라인의 맨 위에 있어야 합니다.

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

이것이 나의 문제를 완화시켰다.

패키지를 인스톨 합니다.AspNet.WebApi.코르스

App_Start --> WebApiConfig로 이동합니다.

추가:

var cors = new EnableCorsAttribute("http://localhost:4200", ""); 구성.EnableCors(코어)

참고: 특정 URL의 끝에 '/'를 추가하면 해당 URL이 작동하지 않습니다.

이상하게 들리겠지만, 저는 [Http Post]가 아니라 [Http Post()]였습니다.용장 괄호를 제거하자 동작하기 시작했습니다.

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

에서 단순히 Web API를 작성하는 사용자용입니다.웹 어플리케이션이 아닌 NET 5의 경우Startup.cs다음과 같이 정책을 구성해야 합니다.

public void ConfigureServices(IServiceCollection services)
{
    // Additional configs above...
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAnyOrigin", builder =>
        {
            // Allow "Access-Control-Allow-Origin: *" header
            builder.AllowAnyOrigin();
        });
    });
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // Add this above other config options...
    app.UseCors("AllowAnyOrigin");
}

언급URL : https://stackoverflow.com/questions/27504256/mvc-web-api-no-access-control-allow-origin-header-is-present-on-the-requested

반응형