CORS-httprequest를 어떻게 '프리 플라이트'합니까?

내가 소유 한 WCF 서비스에 대한 도메인 간 HTTP 요청을 만들려고합니다. 교차 도메인 스크립팅 제한 사항을 다루는 몇 가지 기술을 읽었습니다. 내 서비스는 GET 및 POST 요청을 모두 수용해야하기 때문에 src가 GET 요청의 URL 인 일부 동적 스크립트 태그를 구현할 수 없습니다. 서버에서 자유롭게 변경할 수 있기 때문에 "Access-Control-Allow-Origin"헤더와 OPTIONS 요청이있는 '프리 플라이트'요청을 포함하도록 서버 응답을 구성하는 해결 방법을 구현하기 시작했습니다. 이 게시물에서 아이디어를 얻었습니다. CORS 작동하기

서버 측에서 내 웹 메서드는 HTTP 응답에 'Access-Control-Allow-Origin : *'을 추가합니다. 이제 응답에이 헤더가 포함되어 있음을 알 수 있습니다. 내 질문은 : 어떻게 요청 (옵션)을 '프리 플라이트'합니까? GET 요청을 만들기 위해 jQuery.getJSON을 사용하고 있지만 브라우저는 악명 높은 요청을 즉시 취소합니다.

Origin http : // localhost 는 Access-Control-Allow-Origin에서 허용되지 않습니다.

이 CORS 기술에 익숙한 사람이 있습니까? 내 요청을 전달하기 위해 클라이언트에서 어떤 변경을해야합니까?

감사!

— 새긴 금
소스

답변:

158

실행 전 요청 중에 Access-Control-Request-Method 및 Access-Control-Request-Headers라는 두 개의 헤더가 표시되어야합니다. 이러한 요청 헤더는 실제 요청을 할 수있는 권한을 서버에 요청합니다. 실제 요청이 작동하려면 프리 플라이트 응답에서 이러한 헤더를 확인해야합니다.

예를 들어 브라우저가 다음 헤더를 사용하여 요청을한다고 가정합니다.

Origin: http://yourdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

그러면 서버가 다음 헤더로 응답해야합니다.

Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header

Access-Control-Allow-Headers 응답 헤더에 특히주의하십시오. 이 헤더의 값은 Access-Control-Request-Headers 요청 헤더의 헤더와 동일해야하며 '*'일 수 없습니다.

이 응답을 프리 플라이트 요청에 보내면 브라우저가 실제 요청을 수행합니다. CORS에 대한 자세한 내용은 http://www.html5rocks.com/en/tutorials/cors/에서 확인할 수 있습니다 .

— Monsur
소스

Access-Control-Allow-Origin에 여러 도메인을 추가 할 수 있습니까?

— botbot

@botbot 당신은 아마 지금까지이 문제를 해결했지만 다른 사람들이 할 수 있을지 궁금해하는 경우에 대비해Access-Control-Allow-Origin: *

— Steve Chambers

나는 뭔가를 놓친 것 같다. 두 개의 XMLHttp 요청을 보내야합니까? 하나는 프리 플라이트 용입니다. 성공에 대한 응답을 확인한 다음 실제 쿼리를 보내시겠습니까?

— Kangkan 2014 년

@Kangkan 프리 플라이트 요청을 보내는 것에 대해 걱정할 필요가 없습니다. 요청에 프리 플라이트가 필요한 경우 브라우저가 대신 전송합니다.

— monsur

노드 / expressjs로 문제를 해결 한 '특별한주의'비트에 감사드립니다. 이러한 프리 플라이트 요청을 포착하기 위해 필터를 추가 할 수있었습니다

//cors and preflight filtering     app.all('*', function(req, res, next){..     //preflight needs to return exact request-header     res.set('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);     if ('OPTIONS' == req.method) return res.send(204);next();     });

— Kurtfm 2014-08-27

이 스레드는 2014 년으로 거슬러 올라가지 만,이 문제는 여전히 많은 사람들에게 현재의 문제 일 수 있습니다. 다음은 jQuery 1.12 / PHP 5.6 컨텍스트에서 처리 한 방법입니다.

jQuery는 제한된 헤더 만 사용하여 XHR 요청을 보냈습니다. 'Origin'만 보냈습니다.
비행 전 요청이 필요하지 않았습니다.
서버는 이러한 요청을 감지하고 "Access-Control-Allow-Origin :"을 추가하기 만하면됩니다. $ _SERVER [ 'HTTP_ORIGIN'] 헤더, 이것이 교차 출처 XHR임을 감지 한 후.

PHP 코드 샘플 :

if (!empty($_SERVER['HTTP_ORIGIN'])) {
    // Uh oh, this XHR comes from outer space...
    // Use this opportunity to filter out referers that shouldn't be allowed to see this request
    if (!preg_match('@\.partner\.domain\.net$@'))
        die("End of the road if you're not my business partner.");

    // otherwise oblige
    header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
}
else {
    // local request, no need to send a specific header for CORS
}

특히 exit;프리 플라이트가 필요하지 않으므로을 추가하지 마십시오 .

— Fabien Haddadi
소스