[javascript] 프리 플라이트 요청에 대한 응답이 액세스 제어 확인을 통과하지 못함

JAVASCRIPT / 글쓴이

Amazon Web Services에서 REST API를 호출하기 위해 ngResource를 사용 하여이 오류가 발생합니다.

XMLHttpRequest가 http://server.apiurl.com:8000/s/login?login=facebook을 로드 할 수 없습니다
. 프리 플라이트 요청에 대한 응답이 액세스 제어 확인을 통과하지 못함 : 요청 된 리소스에 ‘Access-Control-Allow-Origin’헤더가 없습니다. 따라서 원본 ‘ http : // localhost ‘는 액세스가 허용되지 않습니다.
405 오류

서비스:

socialMarkt.factory('loginService', ['$resource', function($resource){    
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, { login:"facebook", access_token: "@access_token" ,facebook_id: "@facebook_id" }, {
                getUser: {method:'POST'}
            });
}]);

제어 장치:

[...]
loginService.getUser(JSON.stringify(fbObj)),
                function(data){
                    console.log(data);
                },
                function(result) {
                    console.error('Error', result.status);
                }
[...]

Chrome을 사용하고 있는데이 문제를 해결하기 위해 무엇을해야할지 모르겠습니다. 서버에서 origin의 헤더를 허용하도록 구성했습니다 localhost.

답변

CORS 문제가 발생했습니다.

이 문제를 해결 / 해결하는 방법에는 여러 가지가 있습니다.

  1. CORS를 끕니다. 예를 들어 크롬에서 cors를 끄는 방법
  2. 브라우저 용 플러그인 사용
  3. nginx와 같은 프록시를 사용하십시오. 설정 방법의 예
  4. 서버에 필요한 설정을 수행하십시오. 이는 EC2 인스턴스에로드 한 웹 서버의 요소입니다 ( “Amazon 웹 서비스”의 의미라고 가정). 특정 서버의 경우 enable CORS 웹 사이트를 참조 할 수 있습니다 .

더 자세하게는 localhost에서 api.serverurl.com에 액세스하려고합니다. 이것은 도메인 간 요청의 정확한 정의입니다.

작업을 완료하기 위해 전원을 끄면 (확인, 다른 사이트를 방문하고 길을 따라 갈 수있는 경우 보안을 약화 시키십시오) 프록시를 사용하면 브라우저가 모든 요청이 로컬 호스트에서 온 것으로 생각하게됩니다 실제로 원격 서버를 호출하는 로컬 서버가 있습니다.

따라서 api.serverurl.com은 localhost : 8000 / api가되고 로컬 nginx 또는 다른 프록시가 올바른 대상으로 전송합니다.

대중적인 수요에 의해, 100 % 더 많은 CORS 정보 …. 동일한 맛!

그리고 downvoters를 위해 …. CORS를 우회하는 것은 단순히 프론트 엔드를 배우는 사람들에게 보여지는 것입니다.
https://codecraft.tv/courses/angular/http/http-with-promises/

답변

내 “API 서버”는 PHP 응용 프로그램이므로이 문제를 해결하려면 아래 해결책이 있습니다.

index.php에 줄을 넣으십시오

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

답변

AspNetCore 웹 API에서이 문제는 “Microsoft.AspNetCore.Cors”(1.1.1 버전)를 추가하고 Startup.cs에 아래 변경 사항을 추가하여 해결되었습니다.

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(options =>
    {
          options.AddPolicy("AllowAllHeaders",
                builder =>
            {
                    builder.AllowAnyOrigin()
                           .AllowAnyHeader()
                           .AllowAnyMethod();
                });
    });
    .
    .
    .
}

과 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{


    // Shows UseCors with named policy.
    app.UseCors("AllowAllHeaders");
    .
    .
    .
}

[EnableCors("AllowAllHeaders")]컨트롤러를 착용 하고

답변

CORS에 관해서는 몇 가지주의 사항이 있습니다. 첫째, 와일드 카드를 허용 *하지 않지만이 곳을 잡지 마십시오. 어딘가에서 읽었으며 지금 기사를 찾을 수 없습니다.

다른 도메인에서 요청하는 경우 허용 오리진 헤더를 추가해야합니다. 

 Access-Control-Allow-Origin: www.other.com

당신은 POST / PUT / PATCH 같은 서버 자원에 영향을, 그리고 마임 유형은 다음과 다른 경우 요청하게되는 경우 application/x-www-form-urlencoded, multipart/form-data또는 text/plain브라우저가 자동으로이를 허용 할 경우 비행 전 옵션은 서버에 확인을 요청하게됩니다 .

따라서 API / 서버는 이러한 OPTIONS 요청을 적절하게 처리해야하며, 적절하게 응답해야 access control headers하며 http 응답 상태 코드는이어야 200합니다.

헤더는 다음과 같아야합니다. 필요에 맞게 조정하십시오.

   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

max-age 헤더는 중요합니다. 제 경우에는 그것 없이는 작동하지 않을 것입니다. 브라우저에 “액세스 권한”의 유효 기간에 대한 정보가 필요하다고 생각합니다.

또한 다른 도메인에서 mime 으로 POST요청하는 application/json경우 이전에 언급 한 allow origin 헤더를 추가해야하므로 다음과 같습니다.

   Access-Control-Allow-Origin: www.other.com 
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

사전 비행이 성공하고 필요한 정보를 모두 얻으면 실제 요청이 이루어집니다.

일반적으로 Access-Control초기 또는 비행 전 요청에서 요청한 모든 헤더가 작동하려면 응답에 제공되어야합니다.

이 링크 의 MDN 문서에 좋은 예가 있으며이 SO 게시물 도 확인해야합니다.

답변

JavaScript XMLHttpRequest 및 Fetch 는 동일한 출처 정책을 따릅니다. 따라서 XMLHttpRequest 또는 Fetch를 사용하는 웹 응용 프로그램은 자체 도메인에 HTTP 요청 만 할 수 있습니다.

출처 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

서버 측에서 Access-Control-Allow-Origin : * HTTP 헤더 를 보내야합니다 .

Apache를 HTTP 서버로 사용하는 경우 다음과 같이 Apache 구성 파일에 추가 할 수 있습니다.

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Apache에서는 Mod_headers가 기본적으로 활성화되어 있지만 다음을 실행하여 활성화 할 수 있습니다.

 a2enmod headers

답변

크롬 확장 프로그램을 작성하는 경우

manifest.json도메인에 대한 권한 을 추가 해야합니다.

"permissions": [
   "http://example.com/*",
   "https://example.com/*"
]

답변

우연히 IIS 서버를 사용하는 경우 HTTP 요청 헤더 옵션에서 아래 헤더를 설정할 수 있습니다.

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

이 모든 게시물, 가져 오기 등이 제대로 작동합니다.