js におけるクロスドメインの問題

この記事では、js のクロスドメインの問題について紹介します。必要な友達は参考にしてください。

/クロスドメインの問題。 、ブックマーク ナゲットを参照してください (クロスドメインに正しく対処し、パニックにならないでください)

1

クロスドメイン: ブラウザーは他の Web サイトからのスクリプトを実行できません。これはブラウザの

Same Origin ポリシー によって引き起こされます。これは、JavaScript 2 でブラウザによって実装されるセキュリティ制限です。

Same Origin ポリシーは以下を制限します。動作:

Cookie、LocalStorage、IndexDBを読み取れません

• DOMおよびJSオブジェクトを取得できません

• Ajaxリクエストを送信できません

• 3.

共通クロスドメインシナリオ

同じオリジン: ドメイン名、プロトコル、ポートが同じです

http://www.nealyang.cn/index.html

call

http ://www .nealyang.cn/server.php

• 非クロスドメインhttp://www.nealyang.cn/index.html

• 電話

  http:/ /www.neal.cn /server.php クロスドメイン、メインドメインは異なりますhttp://abc.nealyang.cn/index.html

• 電話

  http:/ /def.neal.cn/server.php クロスドメイン、異なるサブドメイン名http://www.nealyang.cn:8080/index.html

  Call
http://www. nealyang.cn/server.php

• クロスドメイン、異なるポートhttps://www.nealyang.cn/index.html

  Call
http://www.nealyang.cn/server .php

• クロスドメイン、プロトコルが異なります4.

クロスドメインソリューション

1)jsonpクロスドメイン

html ページで対応するタグを介して異なるドメイン名から静的リソースファイルをロードすることはブラウザによって許可されています。一般に、 script タグ を動的に作成し、パラメータを含む URL をリクエストして、クロスドメイン通信を実現できます。

しかし、最大の欠陥は、get request

$(function(){
/*jQuery支持jsonp的实现方式  */
$.ajax({
url:"www.baidu.com",
type:"GET",
dataType:"jsonp",  //请求方式为：jsonp
jsonpCallback:"callback",
data:{
"username":"yaofan"
}
})
})

2)document.domain + iframe クロスドメイン (1.html と document.domain+iframe クロスドメイン) のみであることです。 html)

最も重要な要件は、メインのドメイン名が同じであることです、2つのHTMLページが必要です

<!-- 这种方式最主要的要求是主域名相同,假设目前a.nealyang.cn和b.nealyang.cn分别对应指定不同的ip服务器
a.nealyang.cn下有一个test.html文件
b.nealyang.cn下有一个1.html文件
  -->
 <p>A页面</p> 
 <!-- 利用iframe加载其他域下的文件 ，src中 -->
<iframestyle = "display:none" name = "iframe1" id = "iframe" src = "http://b.nealyang.cn/1.html" frameborder = "0">
     </iframe>  
     <script type="text/javascript">
     $(function(){
     try{
     document.domain = "nealyang.cn" //将document.domain设置为nealyang.cn，当iframe加载完毕后就可以获取nealyang.cn域下的全局对象
     }catch(e){
     $("#iframe").load(function(){
   var jq = document.getElementById("iframe").contentWindow.$; 
    jq.get("http://nealyang.cn/test.json",function(data){
     console.log(data);
     });
     })
     }
     })
     </script>

3)window.name + iframeクロスドメイン(origin) .html および target.html Nuggets の ではありません)

window.name プロパティは、ウィンドウ名を格納する文字列を設定または返すことができます。彼女の魔法は、名前の値が、別のページまたは別のドメインに読み込まれた場合でも存在し、変更することなく変更されず、非常に長い名前 (2MB) を保存できることです。サーバー上のデータの場合、iframe タグをページの下に作成します。iframe の src はサーバー ファイルのアドレスを指します (iframe タグ src はドメインをまたぐことができます)。window.name の値はサーバーに設定されます。ファイルを読み込んでから、iframe の window.name の値を取得します

index.html ページの src とページ内の iframe が異なるソースからのものである場合、何も操作できません。フレーム。 2 つのページは異なるドメインにあり、名前の値は同じドメイン内のページにのみ表示されるため、ソース ページはターゲット ページの名前の値を取得できません。

4)L

ocation.hash + iframe クロスドメイン

このクロスドメイン メソッドは、上で紹介したメソッドと似ており、 iframe を動的に挿入し、その src を次のように設定します。サーバーアドレスもjsコードの一端を出力し、サブウィンドウとの通信によりデータ送信を完了します。

そして、location.hash は実際には URL のアンカーポイントです。たとえば、URL http://www.nealyang.cn#Nealyang を開いた後、コンソールに location.hash を入力すると #Nealyang が返されます。分野。

【注意】実際、location.hashとwindow.hashはどちらもグローバルオブジェクトのプロパティを使用するメソッドであり、getのみを実装できます。リクエスト

<script type="text/javascript">
function getData(url,fn){
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
iframe.onload = function(){
fn(iframe.contentWindow.location.hash.substring(1));
window.location.hash = "";
document.body.removeChild(iframe);
};
document.body.removeChild(iframe);
}
//get data from server
var url = "http://localhost:8080/data.php";
getData(url,function(data){
var jsondata = JSON.parse(data);
console.log(jsondata.name + "" +jsondata.age);
});
</script>

5)postMessage クロスドメイン (

a.html および b.html

)これは、情報を送信するための postMessage メソッドを含む、H5 によって提案されたクールな API です。情報の受信メッセージ時間。

① 发送信息的postMessage方法是向外界窗口发送信息

otherWindow.postMessage(message,targetOrigin);

l otherWindow指的是目标窗口，是window.frames属性的成员或者是window.open方法创建的窗口。

l Message是要发送的消息，类型是String、Object

l targetOringin是限定消息接收范围，不限制用星号*

② 接受信息的message事件

var onmessage = function(event){
var data = event.data;
var origin = event.origin;
}
if(typeof window.addEventListener != 'undefined'){
    window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
    window.attachEvent('onmessage', onmessage);
}

6) 跨域资源共享CORS

目前主流的跨域解决方案

1）简介

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而客服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

相关推荐：

JS跨域处理详解

js跨域请求服务实例分析

关于js跨域问题的总结

以上がjs におけるクロスドメインの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。