우체부는 어떻게 요청을 보내나요?Ajax, 동일한 원본 정책

우체부는 어떻게 요청을 보내나요?Ajax, 동일한 원본 정책

나는 포스트맨이라는 매우 유용한 크롬 확장자를 발견했다.이것은 특히 RESTful 애플리케이션을 프로그래밍할 때 매우 유용한 확장 기능입니다.

한 가지 혼란스러운 점은 이 플러그인/확장이 어떻게 다른 도메인에서 POST 요구를 정상적으로 송신할 수 있었는가 하는 것입니다.

저는 이렇게 포스트맨을 이용해서 투표를 해보았습니다.

제출 후 실제로는 투표가 반영되었지만, AJAX와 JavaScript를 사용하여 투표하려고 하면 브라우저의 오리진 정책이 다르기 때문에 실패합니다.

그게 어떻게 가능할 수가 있지?

jQuery를 사용한 코드입니다.내 컴퓨터에서 사용했어, localhost.

init: function() {
    $.ajax({
        url: 'http://example.com/vote.php',
        type:'POST',
        dataType: 'html',
        data: {
            id: '1'
        },
        success: function(data) {
        if ( data == 'voted' ) {
            $('.set-result').html( 'you already voted. try again after 24 hours' );
        } else {
            $('.set-result').html( 'successfully voted' );
        }
    }
    });
},

Chrome 패키지 앱은 교차 도메인 권한을 가질 수 있습니다.Postman을 설치하면 이 앱이 모든 도메인에 액세스할 것을 권장합니다.

배치에 의해*/*에permissions매니페스트 파일의 섹션, 할 수 있습니다.

자세한 내용은 이쪽:https://developer.chrome.com/extensions/xhr.html

다음 헤더를 우편배달부에서 보낸 Ajax 요청에 추가할 수 있습니다.

Content-Type      application/json

X-Requested-With  XMLHttpRequest

스크린샷

폴링을 호스트하는 사이트("vote.php" 스크립트)에서는 사이트(또는 모든 사이트)의 리스트로부터 투고를 허가하기 위해서, 「Access-Control-Allow-Origin」헤더를 설정할 필요가 있는 것 같습니다.

헤더에 * 값을 지정하면 모든 웹 사이트에서 게시할 수 있습니다.

Access-Control-Allow-Origin: *

즉, 다음 사항을 투표의 선두에 둘 수 있습니다.php

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

Chrome 확장 및 앱은 일반 웹 페이지에 있는 것과 동일한 보안 제한을 받지 않습니다.

기타 디버깅 힌트:

브라우저의 로컬 파일 시스템에 열려 있는 웹 페이지에서 원격 서비스에 액세스하려고 하면 브라우저가 웹 서비스에서 제공하는 파일과 다른 보안 규칙을 적용할 수 있습니다.

예를 들어 다음과 같은 위치에서 로컬 파일을 여는 경우C:\MyDocuments\weboot\index.htm(Windows) 또는\Users\joe\Sites\index.html(Mac) 대부분의 브라우저에서 지정된 헤더를 사용하더라도 AJAX 요청이 작동하지 않을 수 있습니다.

애플의 Safari는 로컬에서 열린 파일에 크로스 도메인 제한을 거의 적용하지 않지만 Firefox는 크롬을 중간에 두고 허용 내용에 대해 훨씬 더 엄격하다.로컬에서 웹 서버 실행(예:http://localhost/치 않은 동작을 피하는 는 예기치 않은 동작을 피하는 것이 좋습니다.

또한 Ajax 요청을 처리하는 함수를 제공하는 다른 라이브러리(예: Angular)JS) 는, 디폴트로 서버에 다른 헤더를 설정할 필요가 있는 경우가 있습니다.일반적으로 브라우저 디버깅콘솔에서 장애의 원인을 확인할 수 있습니다.

2021년 10월

제가 조사한 결과, 요청하신 헤더에 추가 필드가 필요하다는 것을 알게 되었습니다.따라서 헤더에 다음 키 값을 추가합니다.

key: X-Requested-With| value:XMLHttpRequest

언급URL : https://stackoverflow.com/questions/16021442/how-postman-send-requests-ajax-same-origin-policy