development

GET 요청 대신 OPTIONS 요청을받는 이유는 무엇입니까?

big-blog 2020. 3. 25. 08:26
반응형

GET 요청 대신 OPTIONS 요청을받는 이유는 무엇입니까?


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
$.get("http://example.com/", function(data) {
     alert(data);
});
</script>

해당 URL에 대한 OPTIONS 요청을 수행 한 다음 콜백이 아무 것도 호출되지 않습니다.

교차 도메인이 아닌 경우 제대로 작동합니다.

jQuery는 <script>노드로 호출 한 다음로드 될 때 콜백을 수행해야합니까? 도메인 간이므로 결과를 얻을 수는 없지만 문제는 없습니다. 그냥 전화를 걸고 싶어 이것은 버그입니까, 아니면 내가 잘못하고 있습니까?


에 따르면 MDN ,

사전 요청

위에서 설명한 간단한 요청과 달리, "미리 비행 된"요청은 먼저 실제 요청이 안전하게 전송되는지 확인하기 위해 다른 도메인의 리소스에 HTTP OPTIONS 요청 헤더를 보냅니다. 사이트 간 요청은 사용자 데이터에 영향을 줄 수 있으므로 이와 같이 프리 플라이트됩니다. 특히 다음과 같은 경우 요청이 프리 플라이트됩니다.

  • GET 또는 POST 이외의 메소드를 사용합니다. 또한 POST를 사용하여 application / x-www-form-urlencoded, multipart / form-data 또는 text / plain 이외의 Content-Type으로 요청 데이터를 보내는 경우 (예 : POST 요청이 서버에 XML 페이로드를 보내는 경우) application / xml 또는 text / xml을 사용하면 요청이 프리 플라이트됩니다.
  • 요청에 사용자 정의 헤더를 설정합니다 (예 : 요청에 X-PINGOTHER와 같은 헤더가 사용됨)

옵션은에서입니다 http://www.w3.org/TR/cors/ 참조 http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/ 에 대한 조금 더 많은 정보


POST 하려는 경우

JSON.stringify양식 데이터 를 확인 하고로 보내십시오 text/plain.

<form id="my-form" onSubmit="return postMyFormData();">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <input type="submit" value="Submit My Form">
</form>

function postMyFormData() {

    var formData = $('#my-form').serializeArray();
    formData = formData.reduce(function(obj, item) {
        obj[item.name] = item.value;
        return obj;
    }, {});
    formData = JSON.stringify(formData);

    $.ajax({
        type: "POST",
        url: "https://website.com/path",
        data: formData,
        success: function() { ... },
        dataType: "text",
        contentType : "text/plain"
    });
}

jQuery가 URL을 제공 할 때 자연스럽게 JSONP 요청을 수행한다고 믿지 않습니다. 그러나 콜백에 사용할 인수를 알려 주면 JSONP 요청을 수행합니다.

$.get("http://metaward.com/import/http://metaward.com/u/ptarjan?jsoncallback=?", function(data) {
     alert(data);
});

해당 인수를 사용하는 것은 전적으로 수신 스크립트에 달려 있습니다 ( "jsoncallback"이라고 할 필요는 없음).이 경우에는 함수가 호출되지 않습니다. 그러나 metaward.com의 스크립트가 실행되기를 원했기 때문에 스크립트가 작성됩니다.


실제로, 보안상의 이유로 도메인 간 AJAX (XMLHttp) 요청은 허용되지 않습니다 (클라이언트 측에서 "제한된"웹 페이지를 가져 와서 서버로 다시 보내는 것에 대해 생각하십시오. 이는 보안 문제입니다).

유일한 해결 방법은 콜백입니다. 이것은 새로운 스크립트 객체를 생성하고 src를 JSON 값 (myFunction ({data})을 사용하는 콜백 인 end-side JavaScript를 가리 키도록합니다. myFunction은 데이터와 관련하여 무언가를 수행하는 함수입니다 (예 : 저장) 변수에서).


"application / json"을 "text / plain"으로 변경하고 JSON.stringify (요청)을 잊지 마십시오.

var request = {Company: sapws.dbName, UserName: username, Password: userpass};
    console.log(request);
    $.ajax({
        type: "POST",
        url: this.wsUrl + "/Login",
        contentType: "text/plain",
        data: JSON.stringify(request),

        crossDomain: true,
    });

나는 같은 문제가 있었다. 내 수정은 개발 환경에있을 때만 존재하는 PHP 스크립트에 헤더를 추가하는 것이 었습니다.

이를 통해 도메인 간 요청이 가능합니다.

header("Access-Control-Allow-Origin: *");

이는 프리 플라이트 요청에 클라이언트가 원하는 헤더를 보내도된다는 것을 알려줍니다.

header("Access-Control-Allow-Headers: *");

이런 식으로 요청을 수정할 필요가 없습니다.

잠재적으로 유출 될 수있는 민감한 데이터가 dev 데이터베이스에 있다면, 이것에 대해 두 번 생각할 수 있습니다.


Firefox 및 Opera (Mac에서도 테스트 됨)는 크로스 도메인을 좋아하지 않지만 (Safari는 괜찮습니다).

원격 페이지를 말리려면 로컬 서버 측 코드를 호출해야 할 수도 있습니다.


필자의 경우 동일한 웹 서버에 jQuery POST를 발행했기 때문에 문제는 CORS와 관련이 없습니다. 데이터는 JSON이지만 dataType : 'json'매개 변수를 생략했습니다.

위의 David Lopes의 답변에 표시된 것처럼 contentType 매개 변수가 없었거나 추가하지 않았습니다.


다음 헤더를 사용하여 문제를 해결할 수있었습니다.

Access-Control-Allow-Origin
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Control-Allow-Methods

Nodejs를 사용하는 경우 복사 / 붙여 넣을 수있는 코드는 다음과 같습니다.

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin','*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');
  next();
});

참고 URL : https://stackoverflow.com/questions/1256593/why-am-i-getting-an-options-request-instead-of-a-get-request

반응형