CORS 교차 도메인에 대한 심층적인 이해(코드 예)

이 글은 CORS 크로스 도메인(코드 예제)에 대한 심층적인 이해를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

인터뷰에서 데이터 상호 작용에 관해 질문을 받으면 도메인 간 처리를 처리하는 방법을 묻는 경우가 많습니다. 대부분의 사람들이 JSONP라고 대답하고 면접관은 "JSONP의 단점이 무엇입니까?"라고 묻습니다. 이때 면접관이 GET 방식을 지원한다고 말하면 면접관은 POST가 무엇인지 묻습니다. 요청을 보내면 어떻게 해야 하나요? 기초가 탄탄한 면접관은 CORS 크로스 도메인을 사용한다고 말할 것입니다. 반면 기초가 탄탄하지 않은 면접관은 고개를 저을 수도 있습니다.

아직 끝나지 않았습니다. 회사가 좀 더 형식적이거나 기술적인 능력에 관심이 있고, 중요한 직위에 대한 면접을 하고 있고 HR이 급여를 삭감하고 싶어한다면 이를 보상해 줄 것입니다. CORS 크로스 도메인의 이점은 무엇입니까? 문제는 무엇입니까? 이때, 호환성이 좋지 않아 IE10+ 브라우저가 필요하다고 답변하더라도 상대방은 여전히 ​​할 말이 있을 텐데요, 호환성을 어떻게 처리해야 할까요? 후보자들은 할 말도 없고, 자리를 뜬다 해도 연봉 협상에 자신감이 없을 것이다.

CORS 크로스 도메인은 면접관이 한 명씩 합격할 수 있는 정말 강력한 도구입니다.

이게 왜죠?

1. CORS 요청은 많지 않습니다. 개발자는 이 시나리오를 거의 사용하지 않으며 대부분 JSONP에서 처리됩니다.

2. 개발자 자신의 실력이 탄탄하지 않고, 태도가 게으른 편이며, 기술 수준을 향상시키려는 인식과 의지가 부족한 경우가 많습니다.

3. 관련 학습 자료가 거의 없고, 순수 프론트엔드 초보자가 테스트 가능한 환경을 구축하기 어렵습니다.

이 난관에 직면한 우리는 오늘 그것을 완전히 해결하여 더 이상 우리의 약점이 아니라 우리의 기술력을 보여주는 하이라이트가 되도록 하겠습니다.

먼저 CORS란 무엇인가요? W3C 표준의 전체 이름은 "교차 출처 리소스 공유"입니다.

이를 통해 브라우저는 교차 출처 서버에 XMLHttpRequest 요청을 발행할 수 있으므로 AJAX가 동일한 출처에서만 사용될 수 있다는 제한을 극복할 수 있습니다.

장점과 단점

장점:

1 POST 및 모든 HTTP 요청을 지원합니다. 2. . JSOP3보다 보안이 높습니다. 프론트 엔드는 할 일이 적습니다

단점:

1. 그리고 다음

2. 서버 지원이 필요합니다

3. 사용 방법이 조금 복잡합니다

사용 방법은 무엇인가요?

프런트 엔드 부분:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>CORS跨域请求</title>
    <script>
        function createCORSRequest(method, url) {
            var xhr = new XMLHttpRequest();
            if ("withCredentials" in xhr) {
                xhr.open(method, url, true);
            } else if (typeof XDomainRequest != "undefined") {
                xhr = new XDomainRequest();
                xhr.open(method, url);
            } else {
                xhr = null;
            }
            return xhr;
        }

        window.onload = function () {
            var oBtn = document.getElementById(&#39;btn1&#39;);
            oBtn.onclick = function () {
                var xhr = createCORSRequest("get", "http://wpdic.com/cors.php");
                if (xhr) {
                    xhr.onload = function () {
                        var json = JSON.parse(xhr.responseText);
                        alert(json.a);
                    };
                    xhr.onerror = function () {
                        alert(&#39;请求失败.&#39;);
                    };
                    xhr.send();
                }
            };
        };
    </script>


    <input>

참고:

1 위 코드는 XDomainRequest

#🎜🎜 때문에 IE8과 호환됩니다. # 2. 다른 코드를 XMLHttpRequset으로 사용하세요. 2.0인지 아닌지 고려하지 마세요.

3 데이터를 게시하려면 xhr.send()에서 하면 됩니다. #🎜🎜 #

4. '간단한 메소드' 같은 지식을 공부하는 것은 권장하지 않습니다. 코드를 이해하고 사용할 수 있게 되면 문제가 발생하는지 확인해도 늦지 않습니다.

#🎜 🎜#백엔드 부분:

<?php header(&#39;content-type:application:json;charset=utf8&#39;);
header(&#39;Access-Control-Allow-Origin:*&#39;);
header(&#39;Access-Control-Allow-Methods:GET,POST&#39;);
header(&#39;Access-Control-Allow-Credentials: true&#39;);
header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);
$str = &#39;{"a":1,"b":2,"c":3,"d":4,"e":5}&#39;; 
echo $str;
?>

# 🎜🎜#참고:

1.Access-Control-Allow-Origin:

은 모든 도메인 이름에서 도메인 간 액세스를 허용하는 것을 의미합니다. 교차 도메인 액세스를 허용하려면 도메인 이름을 지정해야 합니다. Access-Control-Allow-Origin:

을 넣으면 Access-Control-Allow-Origin: allowed domain name으로 변경되며 실제로 이 작업을 수행해야 합니다. 2. Access-Control-Allow-Methods: GET, POST는 허용되는 메소드를 지정하므로, 제어를 더욱 엄격하게 하고 DELETE 등의 권한을 임의로 놓지 않는 것이 좋습니다

2. -Control-Allow-Credentials

이 필드는 선택 사항입니다. 해당 값은 쿠키 전송을 허용할지 여부를 나타내는 부울 값입니다. 기본적으로 쿠키는 CORS 요청에 포함되지 않습니다. true로 설정하면 서버가 쿠키가 요청에 포함되어 서버로 전송되도록 명시적으로 허용합니다. 이 값은 true로만 설정할 수 있습니다. 서버가 브라우저에서 쿠키를 보내는 것을 원하지 않으면 이 필드를 삭제하면 됩니다.

마지막으로 자주 묻는 면접 질문:

CORS와 JSONP의 적용 시나리오의 차이점은 무엇인가요?

CORS는 브라우저(>IE10)와 서버 지원이 모두 필요합니다. 이는 기본적인 크로스 도메인 솔루션이며 브라우저에 의해 자동으로 완료됩니다. 장점은 더 강력하고 다양한 HTTP 메소드를 지원한다는 점입니다. 단점은 JSONP만큼 호환성이 좋지 않다는 것입니다.

위 내용은 CORS 교차 도메인에 대한 심층적인 이해(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!