programing

GET/POST/PUT/DELETE 대신 AJAX가 OPTIONS를 전송합니까?

codeshow 2023. 3. 8. 21:39
반응형

GET/POST/PUT/DELETE 대신 AJAX가 OPTIONS를 전송합니까?

회사에서 사내 웹 어플리케이션 작업을 하고 있습니다.IE10에서는 요청은 정상적으로 동작하지만 Chrome에서는 정의된 메서드가 아닌 OPTIONS를 사용하여 모든 AJAX 요청(많은 요청)이 전송됩니다.엄밀히 말하면, 제 요구는 「크로스 도메인」입니다.사이트는 localhost:6120에서 서비스되며, AJAX 요청 서비스는 57124에서 제공됩니다. 닫힌 jquery 버그로 인해 문제가 정의되지만 실제 수정은 아닙니다.

ajax 요청에서 적절한 http 메서드를 사용하려면 어떻게 해야 합니까?

편집:

이것은 모든 페이지의 문서 로드에 있습니다.

jQuery.support.cors = true;

모든 AJAX는 유사하게 구축됩니다.

var url = 'http://localhost:57124/My/Rest/Call';
$.ajax({
    url: url,
    dataType: "json",
    data: json,
    async: true,
    cache: false,
    timeout: 30000,
    headers: { "x-li-format": "json", "X-UserName": userName },
    success: function (data) {
        // my success stuff
    },
    error: function (request, status, error) {
        // my error stuff
    },
    type: "POST"
});

크롬은 CORS 헤더를 찾는 요청을 미리 처리하고 있습니다.요청이 받아들여질 경우 실제 요청이 전송됩니다.이 교차 도메인을 실행하는 경우, 간단히 처리하거나 요청을 교차 도메인이 아닌 다른 도메인으로 만드는 방법을 찾아야 합니다.이것이 바로 jQuery 버그가 수정되지 않아 종료된 이유입니다.이것은 고의로 만든 것이다.

위에서 설명한 단순한 요청과는 달리 "사전 비행" 요청은 먼저 OPTIONS 메서드로 다른 도메인의 리소스에 HTTP 요청을 전송하여 실제 요청을 전송해도 안전한지 여부를 판단합니다.교차 사이트 요청은 사용자 데이터에 영향을 미칠 수 있으므로 이와 같이 사전 전송됩니다.특히 다음과 같은 경우 요구가 프리플라이트 됩니다.

  • GET, HEAD 또는 POST 이외의 방법을 사용합니다.또한 POST를 사용하여 응용 프로그램/x-www-form-urlencoded, multipart/form-data 또는 text/plain 이외의 Content-Type을 사용하여 요청 데이터를 보내는 경우(예를 들어 POST 요구가 application/xml 또는 text/xml을 사용하여 XML payload를 서버에 보내는 경우) 해당 요청은 미리 전송됩니다.
  • 요청에 커스텀 헤더를 설정합니다(예: 요청은 X-PINGOTHER 등의 헤더를 사용합니다).

디폴트 포트 80/443에서 요구가 송신되지 않는 것에 근거해, 이 Ajax 콜은 자동적으로 크로스 오리진 자원(CORS) 요구로 간주됩니다.즉, 이 요구는 서버/서블릿 측에서 CORS 헤더를 체크하는 OPTIONS 요구를 자동적으로 발행하는 것을 의미합니다.

이것은, 다음의 설정을 실시해도 발생합니다.

crossOrigin: false;

아니, 네가 틀려도.

말하면localhost != localhost:57124.localhost포트가 없으면 - 요청된 대상에 연결할 수 없기 때문에 실패합니다. 단, 도메인 이름이 같을 경우 POST 전에 OPTIONS 요청 없이 요청이 전송됩니다.

케빈 B의 말에 동의해요, 버그 보고서에 다 나와 있어요.도메인 간 에이잭스 콜을 시도하고 있는 것 같습니다.같은 오리진 정책에 익숙하지 않은 경우 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript에서 시작할 수 있습니다.

이 콜이 도메인 간 에이잭스콜이 아닌 경우 타깃 URL을 상대적으로 설정하여 문제가 해결되었는지 확인합니다.JSONP를 정말 절박하게 들여다보고 싶다면, 하지만 조심해라, 대혼란이 도사리고 있다.저희가 도와드릴 수 있는 게 별로 없습니다.

가능하면 다른 이름의 일반 GET/POST를 통해 매개 변수를 전달하고 서버 측 코드로 처리합니다.

CORS를 바이패스하기 위한 프록시에서도 같은 문제가 발생했는데 Chrome에서도 POST-> OPTION 에러가 발생하였습니다....Authorization(내 경우 (예: header))"x-li-format" ★★★★★★★★★★★★★★★★★」"X-UserName"」를 참조해 주세요). 형식 더미 형식)으로 전달했습니다.AuthorizatinJack수신처에 콜을 발신할 때, 프록시의 코드를 헤더로 변환하도록 변경했습니다.PHP를 사용하다

if (isset($_GET['AuthorizationJack'])) {
    $request_headers[] = "Authorization: Basic ".$_GET['AuthorizationJack'];
}

저 같은 경우에는 AWS(API Gateway)가 호스팅하는 API를 호출하고 있습니다.API 자체 도메인이 아닌 다른 도메인에서 API를 호출하려고 했을 때 오류가 발생했습니다.API 소유자이기 때문에 Amazon Documentation에서 설명한 바와 같이 테스트 환경에서 CORS를 활성화했습니다.

프로덕션에서는 요청과 api가 동일한 도메인에 있기 때문에 이 오류가 발생하지 않습니다.

도움이 됐으면 좋겠네요!

@Dark Falcon의 답변대로 간단하게 대처했습니다.

제 경우 node.js 서버를 사용하고 있으며 세션이 없는 경우 세션을 만듭니다.OPTIONS 메서드에는 세션 세부 정보가 포함되어 있지 않기 때문에 POST 메서드 요청마다 새 세션이 생성됩니다.

앱 가 create-session-if-if-da인지 했습니다.OPTIONS이 경우 세션 생성 부분을 건너뜁니다.

    app.use(function(req, res, next) {
        if (req.method !== "OPTIONS") {
            if (req.session && req.session.id) {
                 // Session exists
                 next();
            }else{
                 // Create session
                 next();
          }
        } else {
           // If request method is OPTIONS, just skip this part and move to the next method.
           next(); 
        }
    }

"사전 비행" 요청은 먼저 OPTIONS 메서드로 다른 도메인의 리소스에 HTTP 요청을 전송하여 실제 요청을 전송해도 안전한지 여부를 판단합니다.사이트 간 요구

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

공리 사용을 검토하다

axios.get( url,
{ headers: {"Content-Type": "application/json"} } ).then( res => {

  if(res.data.error) {

  } else { 
    doAnything( res.data )
  }

}).catch(function (error) {
   doAnythingError(error)
});

fetch와 axios를 사용하여 이 문제를 완벽하게 처리했습니다.

저도 비슷한 문제에 부딪힌 적이 있습니다.Firefox에서는 모든 것이 정상적으로 작동하고 Chrome에서는 실패하는 이유를 이해하기 위해 거의 반나절을 보냈습니다.제 경우 요청 헤더에 중복된 필드(또는 잘못 입력된 필드)가 원인일 수 있습니다.

XHR 대신 fetch를 사용하면 교차 도메인인 경우에도 요청이 미리 조명되지 않습니다.

 $.ajax({
            url: '###',
            contentType: 'text/plain; charset=utf-8',
            async: false,
            xhrFields: {
                withCredentials: true,
                crossDomain: true,
                Authorization: "Bearer ...."
            },

            method: 'POST',

            data: JSON.stringify( request ),
            success: function (data) {
                console.log(data);
            }
        });

내용입력: 'text/module; charset=utf-8' 또는 내용만 입력텍스트/보통'으로 입력하세요!안부하세요!!

언급URL : https://stackoverflow.com/questions/21783079/ajax-in-chrome-sending-options-instead-of-get-post-put-delete

반응형