JavaScript 교차 도메인 문제

이 글은 JavaScript의 크로스 도메인 문제를 공유합니다. 필요한 친구가 참조할 수 있습니다.

1jsonp

일반적인 인터페이스는 크로스 도메인에 jsonp를 사용하고 dataType을 지정하기 위해 jquery의 ajax를 사용합니다. 그러나

$.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handleResponse', //设置回调函数名
                data : {
                    q : "javascript",
                    count : 1
                },
                success: function(response, status, xhr){
                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });

jsonp는 교차 도메인의 원칙을 지원합니다. 교차 도메인 요청을 구현하는 JSONP의 원칙은 단순히 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 동적으로 생성한 다음 3f1c4e4b6b16bbbd69b2ee476dc4f83a 동일 출처 정책이 적용되지 않는 도메인 간 데이터.

실제로 다음 코드가 구현되어 있습니다. js 스크립트는 콜백(데이터)을 반환하고 콜백 함수는 페이지에 정의되어 있습니다

<script type="text/javascript">
    function handleResponse(response){
            console.log(response);
    }
</script>
<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById(&#39;btn&#39;);

    oBtn.onclick = function() {     

        var script = document.createElement("script");
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>

2iframe + 양식은 IE 브라우저와 호환되며 iframe의 본문 내용은 다음과 같습니다. 사용할 데이터

<iframe name=&#39;hidden_frame&#39; id="hidden_frame" style=&#39;display:none&#39;></iframe>
        <form id="fileform" method="post" enctype="multipart/form-data" target="hidden_frame">
            <input type="file" name="fileUpload" />
        </form>
        <button id="submitbtn">开始上传</button>
        <script type="text/javascript">
            function callback(msg) {
                //回调函数
                alert(msg);
            }
        </script>
        <script type="text/javascript">
            $("#submitbtn").click(function() {
                var callbackurl = window.location.href.substring(0, window.location.href.lastIndexOf(&#39;/&#39;)) + "proxy.html"; //获取代理文件路径
                $("#fileform").attr("action", "FileHandler.ashx?callbackurl=" + callbackurl);
                $("#fileform").submit();
            })
        </script>

3H5의 postMessage() 메소드는 호환되지 않습니다. 자세한 내용은 https://www.cnblogs.com/dolphinX/p/3464056.html

이미지 코드를 업로드하세요. , 인터페이스에서 반환된 데이터는 postMessage

<form action=&#39;http://bird.sns.iqiyi.com/group_photo/upload&#39; method="post" target="imgFile"
    id="fileinfo" enctype="multipart/form-data">
      <input type="file" id="imgFile" accept="image/gif, image/png" class="hide" onchange="getPhotoSize(this)"
      />
      <input type="hidden" name="name" value="" />
      <input type="hidden" name="hobby" value="" />
    </form>
    <iframe

rrree 작성 방법입니다.

위 내용은 JavaScript 교차 도메인 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!