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

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

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

파이썬 플라스크 서버의 경우 flask-cors 플러그인을 사용하여 교차 도메인 요청을 활성화 할 수 있습니다.

참조 : https://flask-cors.readthedocs.io/en/latest/

PHP에서는 헤더를 추가 할 수 있습니다 :

<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...

Node JS 애플리케이션에서 출처 간 요청 문제를 해결하려면 다음을 수행하십시오.

npm i cors

그리고 단순히 아래 줄을 app.js

let cors = require('cors')
app.use(cors())

내 Apache VirtualHost 구성 파일에서 다음 줄을 추가했습니다.

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

API 게이트웨이와 함께 Lambda 통합 프록시를 사용하는 사람들을 위해 . 요청을 직접 제출하는 것처럼 람다 함수를 구성해야합니다. 즉, 함수가 응답 헤더를 올바르게 설정해야합니다. (커스텀 람다 함수를 사용하는 경우 API 게이트웨이에서 처리합니다.)

//In your lambda's index.handler():
exports.handler = (event, context, callback) => {
     //on success:
     callback(null, {
           statusCode: 200,
           headers: {
                "Access-Control-Allow-Origin" : "*"
           }
     }
}

Chrome에서 CORS를 사용 중지하는 것은 좋은 방법이 아니라고 생각 합니다. 이온에서 사용하면 확실히 모바일 빌드에서 문제가 다시 발생하기 때문입니다.

백엔드에서 수정하는 것이 좋습니다.

먼저 In 헤더를 설정해야합니다.

• 헤더 ( '액세스 제어 허용 원본 : *');
• header ( '헤더 세트 액세스 제어 허용 헤더 : "원본, X-Requested-With, Content-Type, Accept"');

API가 GET 및 POST로 작동하는 경우 헤더에서 설정하십시오.

if ($ _SERVER [ 'REQUEST_METHOD'] == 'OPTIONS') {if (isset ($ _ SERVER [ 'HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) header ( "Access-Control-Allow-Methods : GET, POST, OPTIONS");
if (isset ($ _ SERVER [ 'HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) header ( "액세스 제어 허용 헤더 :
{$ _SERVER [ 'HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); 이탈 (0); }

이 오류의 가장 일반적인 원인은 호스트 API가 요청을 http 메소드 (예 : PUT)에 맵핑했으며 API 클라이언트가 다른 http 메소드 (예 : POST 또는 GET)를 사용하여 API를 호출하고 있기 때문입니다.

우리 팀은 때때로 Vue, axios 및 C # WebApi를 사용하여이를 확인합니다. 적중하려는 엔드 포인트에 경로 속성을 추가하면 문제가 해결됩니다.

[Route("ControllerName/Endpoint")]
[HttpOptions, HttpPost]
public IHttpActionResult Endpoint() { }

DNS 서버가 8.8.8.8 (google)로 설정되었을 때이 문제에 직면했습니다. 실제로 문제는 라우터에 있었고 내 응용 프로그램은 로컬이 아닌 Google을 통해 서버와 연결하려고했습니다 (특정 경우). 8.8.8.8을 제거했으며 문제가 해결되었습니다. CORS 설정 으로이 문제가 해결되었지만 누군가 나와 같은 문제를 겪을 수 있음을 알고 있습니다.

업로드를 위해 AWS SDK를 사용하고 있습니다. 온라인 검색에 시간을 보낸 후이 스레드를 우연히 발견했습니다. @lsimoneau 45581857 덕분에 정확히 같은 일이 일어나고 있음 이 밝혀졌습니다. 리전 옵션을 첨부하여 내 요청 Url을 버킷의 리전으로 간단히 가리 켰습니다.

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

GeoServer 의 독립형 배포 에는 Jetty 응용 프로그램 서버가 포함됩니다. CORS (Cross-Origin Resource Sharing)를 활성화하면 도메인 외부의 JavaScript 애플리케이션이 GeoServer를 사용할 수 있습니다.

주석 다음 <filter>과 <filter-mapping>웹 어플리케이션 / geoserver / WEB-INF / web.xml 파일에서 :

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

아무 걱정없이 몇 단계 만 거치면이 문제를 쉽게 해결할 수 있습니다. 친절하게, 해결 단계를 수행하십시오.

1. 오픈 ( https://www.npmjs.com/package/cors#enabling-cors-pre-flight )
2. 설치로 이동하여 npm install cors 명령을 복사하여 노드 터미널을 통해 설치하십시오.
3. 스크롤하여 Simple Usage (모든 CORS 요청 사용)로 이동 한 다음 ur 프로젝트에서 전체 선언을 복사하여 붙여 넣고 실행하십시오 ... 프로젝트를 시도하고 시도해보십시오.

놓치기 매우 쉬운 것 ...

솔루션 탐색기에서 api-project를 마우스 오른쪽 단추로 클릭하십시오. 속성 창에서 '익명 인증'을 사용 함으로 설정하십시오 !!!

크롬 보안을 비활성화합니다. 크롬 바로 가기를 마우스 오른쪽 버튼으로 클릭-> 속성-> 대상을 클릭 한 다음 "C : \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe"붙여 넣기 --disable-web-security --user -data-dir = "c : / chromedev"