🎜失敗🎜🎜🎜異なるドメイン名 (🎜🎜news🎜🎜と🎜🎜store🎜🎜)🎜🎜🎜🎜🎜同じオリジンからのものでない場合、3つの動作が制限されます:
同一生成元ポリシー (クロスドメイン) を避ける
Cookie
<span style="font-size: 14px;">document.domain</span>
Cookie は、サーバーによってブラウザに書き込まれる小さな情報です。同じ病院内の Web ページでのみ共有できます。ただし、2 つの Web ページの第 1 レベルのドメイン名は同じですが、第 2 レベルのドメイン名は異なります。ブラウザでは <code><span style="font-size: 14px;">document.domain</span>共享Cookie
例如，假设文档中的一个脚本在<code><span style="font-size: 14px;">http://store.company.com/dir/page.html</span>执行以下语句：
<span style="font-size: 14px;">document.domain = "company.com"<br></span>
此时，<span style="font-size: 14px;">http://news.company.com/dir/other.html</span>和<span style="font-size: 14px;">http://store.company.com/dir/other.html</span>
就可以通过<span style="font-size: 14px;">document.cookie</span>来设置或获取Cookie，即共享Cookie。
但是这种方法适用于Cookie和iframe窗口，LocalStorage和IndexDB无法通过这种方法规避同源策略。
<span style="font-size: 14px;">iframe</span>
如果两个网页不同源，就无法拿到对方的DOM，典型的例子是<span style="font-size: 14px;">iframe</span>窗口和<span style="font-size: 14px;">window.open</span>方法打开的窗口，如果和父窗口不同源，则会报错。
此时如果两个窗口一级域名相同，只是二级域名不同，那么设置<code><span style="font-size: 14px;">document.domain</span>属性，就可以规避同源策略。
而对于完全不同源的网站，目前有三种方法可以解决跨域窗口之间的通信问题。
片段标识符(fragment identifier) <span style="font-size: 14px;">window.name</span> 跨文档通信API(cross-document messaging)
片段标识符
片段标识符(fragment identifier)指的是URL的#后面的部分，即<span style="font-size: 14px;">http://store.company.com/dir/other.html#fragment</span>的<span style="font-size: 14px;">#fragment</span>(location.hash)，如果只改变片段标识符，页面不会重新刷新。
父窗口可以把信息写入子窗口的片段标识符，子窗口通过监听<span style="font-size: 14px;">hashchange</span>事件得到通知。
<span style="font-size: 14px;">window.name</span>
每个iframe都有包裹它的window，这个window是top window的子窗户，所以自然有<span style="font-size: 14px;">window.name</span>document.domain
を介して Cookie を共有できます。 たとえば、ドキュメント内のスクリプトが 🎜http://store.company.com/dir/page.html🎜 にあるとします。🎜次のステートメントを実行します。 🎜🎜<span style="font-size: 14px;">var newWin = window.open('http://company.com/data.html', 'title')<br>newWin.postMessage('Hello World!'. 'http://company.com/data.html')<br></span>🎜🎜At this時間、🎜🎜http://news.company.com/dir/other.html🎜🎜および🎜🎜http://store.company.com/dir/other.html🎜
🎜 を 🎜🎜document.cookie🎜🎜 に渡すことで、Cookie、つまり共有 Cookie を設定または取得できます。 🎜🎜🎜🎜しかし、この方法は Cookie および iframe ウィンドウでは機能しますが、LocalStorage と IndexDB はこの方法を通じて同一生成元ポリシーを回避できません。 🎜🎜🎜🎜iframe🎜🎜🎜🎜 2 つの Web ページのソースが異なる場合、互いの DOM を取得することはできません。典型的な例は、🎜🎜iframe🎜🎜window と 🎜🎜window.open です。 🎜🎜 🎜 メソッドによって開かれたウィンドウのソースが親ウィンドウと異なる場合、エラーが報告されます。 🎜🎜🎜🎜この時点で、2 つのウィンドウの第 1 レベルのドメイン名が同じであるが、第 2 レベルのドメイン名が異なる場合は、🎜🎜document.domain🎜🎜 を設定します。属性により、同一生成元ポリシーを回避できます。 🎜🎜🎜🎜まったく異なる起源を持つ Web サイトの場合、クロスドメイン ウィンドウ間の通信の問題を解決する方法は現在 3 つあります。 🎜🎜🎜🎜🎜🎜フラグメント識別子🎜🎜🎜🎜🎜🎜window.name🎜🎜🎜🎜🎜🎜クロスドキュメントメッセージングAPI (クロスドキュメントメッセージング)🎜🎜🎜🎜🎜 🎜 🎜🎜🎜 🎜フラグメント識別子は、 URL の # 以降の部分、つまり 🎜🎜http://store.company.com/dir/other.html#fragment🎜🎜 の 🎜🎜#fragment🎜 code>🎜(location.hash)、フラグメント識別子のみが変更された場合、ページは更新されません。 🎜🎜🎜🎜親ウィンドウは子ウィンドウのフラグメント識別子に情報を書き込むことができ、子ウィンドウは🎜🎜hashchange🎜🎜イベントをリッスンすることによって通知されます。 🎜🎜🎜🎜window.name🎜🎜🎜🎜各 iframe にはそれをラップするウィンドウがあります。このウィンドウはトップ ウィンドウの子ウィンドウなので、当然 🎜🎜window.name🎜🎜 を持ちます。この属性の最大の特徴は、ソースが同じかどうかに関係なく、同じウィンドウ内にある限り、ウィンドウ内のすべてのページが読み取られることです。そして window.name に対する書き込み権限を与えます。 🎜🎜🎜🎜 window.name の値は文字列の形式のみにすることができます。この文字列の最大容量は、ブラウザによって異なりますが、約 2M 以上になります。 🎜🎜例如，想要在<span style="font-size: 14px;">http://example/a.html</span>中获取<span style="font-size: 14px;">http://company.com/data.html</span>中的数据，可以在a.html中使用一个隐藏的iframe，将iframe的src首先设置为<span style="font-size: 14px;">http://company.com/data.html</span>，将其window.name设置为所需的数据内容，随后再将这个iframe的src设置为跟a.html页面同一个域的一个页面，不然a.html获取不到该iframe的window.name
<span style="font-size: 14px;">window.postMessage</span>
这是html5中新引入的一个API，可以使用它向其它的window对象发送消息，无论这个window对象属于同源还是不同源。
例如，父窗口<span style="font-size: 14px;">http://example/a.html</span>向子窗口<span style="font-size: 14px;">http://company.com/data.html</span>发送消息：
<span style="font-size: 14px;">var newWin = window.open('http://company.com/data.html', 'title')<br>newWin.postMessage('Hello World!'. 'http://company.com/data.html')<br></span>
<span style="font-size: 14px;">window.postMessage</span>方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源，即<span style="font-size: 14px;">协议</span>+<span style="font-size: 14px;">端口</span>+<span style="font-size: 14px;">域名</span>，也可以设置为<span style="font-size: 14px;">*</span>，表示不限制域名。
子窗口向父窗口发送消息的写法类似：
<span style="font-size: 14px;">window.opener.postMessage('Nice to see you', 'http://example/a.html')<br></span>
子窗口和父窗口都可以通过<span style="font-size: 14px;">message</span>时间，监听对方的消息。
<span style="font-size: 14px;">window.addEventListener('message', function(e) {<br> // ...<br>}, false)<br></span>
<span style="font-size: 14px;">message</span>事件的事件对象<span style="font-size: 14px;">event</span>有以下三个属性：
通过<span style="font-size: 14px;">window.postMessage</span>，也可以读写其他窗口的<span style="font-size: 14px;">localStorage</span>
AJAX
同源策略规定，AJAX请求只能发给同源的网址，否则就报错，但是有三种方法可以规避这个限定：
JSONP
JSONP是服务器与客户端跨源通信的常用方法。基本思想是利用<span style="font-size: 14px;"><script></span>请求脚本能够跨域访问的特性，先定义了一个回调方法，然后将其作为url参数的一部分发送到服务端，服务端通过字符串拼接的方式将数据包裹在回调方法中，再返回回来。
<span style="font-size: 14px;">// 网页动态插入`<script>`元素<br>function addScriptTag(src) {<br> var script = document.createElement("script")<br> script.setAttribute("type", "text/javascript")<br> srcipt.src = src<br> document.body.appendChild(script)<br>}<br><br>window.onload = function() {<br> addScriptTag('http://example.com/ip?callback=foo')<br>}<br><br>function foo(data) {<br> // ...<br>}<br></span>
WebSocket
WebSocket是一种通信协议，使用<span style="font-size: 14px;">ws://</span>（非加密）和<span style="font-size: 14px;">wss://</span>（加密）作为协议前缀。该协议不实行同源政策，只要服务支持，就可以通过它进行跨源通信。
浏览器发出的WebSocket请求的头信息中含有<span style="font-size: 14px;">Origin</span>字段，表示该请求的请求源，即发自哪个域名。（加入白名单）
CORS
跨域资源共享（Cross-Origin Resource Sharing，CORS）是一种使用额外的HTTP头来使一个用户代理从一个不同于当前站点（域）的服务器获取指定的资源的机制。用户代理使用跨域HTTP请求来获取与当前文档不同域、不用协议或端口的资源。
出于安全考虑，浏览器会限制从脚本内发起的跨域HTTP请求。而跨域资源共享（CORS）机制允许web应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。浏览器支持在API容器中（例如<span style="font-size: 14px;">XMLHttpRequest</span>或<span style="font-size: 14px;">Fetch</span>）使用CORS，以降低跨域HTTP请求所带来的风险。
跨域资源共享标准允许在下列场景中使用跨域HTTP请求：
由XMLHttpRequest或Fetch发起的跨域HTTP请求； web字体（CSS中通过<span style="font-size: 14px;">@font-face</span>使用跨域字体资源），因此，网站就可以发布TrueType字体资源，并只允许已授权网站进行跨站调用； WebGL贴图； 使用drawImage将Images/video画面绘制到canvas； 样式表（使用CSSOM）； Scripts（未处理的异常）。
浏览器将CORS请求分成两类：简单请求(simple request)和非简单请求(not-so-simple request)
只要同时满足以下两大条件，就属于简单请求：
1 请求方法是以下三种方法之一：
<span style="font-size: 14px;">- HEAD<br>- GET<br>- POST<br></span>
2 HTTP的头信息不超出以下几种字段：
<span style="font-size: 14px;">- Accept<br>- Accept-Language<br>- Content-Language<br>- Last-Event-ID<br>- Content-Type:(只限三个值：application/x-www-form-urlencoded、multipart/from-data、text/plain)<br></span>
只要不同时满足上面两个条件，就属于非简单请求
简单请求
对于简单请求，浏览器会在请求头部增加一个<span style="font-size: 14px;">Origin</span>字段。这个字段用来说明本次请求来自哪个源（协议+域名+端口）。服务器根据这个值决定是否同意这次请求。
如果<span style="font-size: 14px;">Origin</span>指定的源不在许可范围内，服务器会返回一个正常的HTTP回应。而这个回应的头信息不包含<span style="font-size: 14px;">Access-Control-Allow-Origin</span>字段，从而会抛出错误被<span style="font-size: 14px;">XMLHttpRequest</span>的<span style="font-size: 14px;">onerror</span>函数捕获，（回应的状态码有可能是200）。
如果<span style="font-size: 14px;">Origin</span>指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段
<span style="font-size: 14px;">Access-Control-Allow-Origin: ...<br>Access-Control-Allow-Credentials: true<br>Access-Control-Expose-Headers: callback<br>Content-Type: text/html; charset=utf-8<br></span>
<span style="font-size: 14px;">Access-Control-Allow-Origin</span>: 必须。值要么是请求时<span style="font-size: 14px;">Origin</span>的值，要么是'*'
<span style="font-size: 14px;">Access-Control-Allow-Credentials</span>: 可选。布尔值，决定是否允许发送Cookie，不需要则删除该字段。
<span style="font-size: 14px;">Access-Control-Expose-Headers</span>: 可选。CORS请求时，<span style="font-size: 14px;">XMLHttpRequest</span>对象的 <span style="font-size: 14px;">getResponseHeader()</span>方法只能拿到6个基本字段：<span style="font-size: 14px;">Cache-Control</span>、<span style="font-size: 14px;">Content-Language</span>、<span style="font-size: 14px;">Content-Type</span>、<span style="font-size: 14px;">Expires</span>、<span style="font-size: 14px;">Last-Modified</span>、<span style="font-size: 14px;">Pragma</span>。如果想拿到其他字段，就需要在<span style="font-size: 14px;">Access-Control-Expose-Header</span>里面指定。上面的例子指定为callback，则可以使用<span style="font-size: 14px;">getResponseHeader(callback)</span>获取callback字段的值。
CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发送到服务器，一方面要服务器同意，指定<span style="font-size: 14px;">Access-Control-Allow-Credentials</span>字段，另一方面，开发者需要在AJAX请求中设置<span style="font-size: 14px;">withCredentials</span>属性：
<span style="font-size: 14px;">var xhr = new XMLHttpRequest()<br>xhr.withCredentials = true<br></span>
否则，即使服务器同意发送Cookie，浏览器也不会发送。
需要注意的是，如果要发送Cookie，<span style="font-size: 14px;">Access-Control-Allow-Origin</span>就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源策略，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且跨域的原网页中的<span style="font-size: 14px;">document.cookie</span>操作也无法获取嗷服务器域名下的Cookie。
非简单请求
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是<span style="font-size: 14px;">PUT</span>或<span style="font-size: 14px;">DELETE</span>，或者<span style="font-size: 14px;">Content-Type</span>字段的类型是<span style="font-size: 14px;">application/json</span>。
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为“预检”请求。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP操作和头信息字段。只有得到肯定答复，浏览器才会发出正式的<span style="font-size: 14px;">XMLHttpRequest</span>请求，否则就报错。
“预检”请求用请求方法是<span style="font-size: 14px;">OPTIONS</span>，表示这个请求是用来询问的。头信息里面，关键字段是<span style="font-size: 14px;">Origin</span>，表示请求来自哪个源。
还有以下两个特殊字段：
服务器返回的响应：
<span style="font-size: 14px;">Access-Control-Allow-Methods: ...<br>Access-Control-Expose-Headers: callback<br>Access-Control-Allow-Credentials: true<br>Access-Control-Max-Age: 1728000<br></span>
Access-Control-Allow-Methods: 必须。逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。为了避免多次“预检”行为。 Access-Control-Expose-Headers: ブラウザーリクエストに<span style="font-size: 14px;">Access-Control-Request-Headers</span>字段，则<span style="font-size: 14px;">Access-Control-Allow-Headers</span>字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。 Access-Control-Allow-Credentials: 与简单请求时的含义相同。 Access-Control-Max-Age: 本次预检请求的有效期。
CORS与JSONP的比较
CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持<span style="font-size: 14px;">GET</span>Access-Control-Request-Headersフィールドが含まれる場合、
<p>Access-Control-Allow-ヘッダー <span style="font-size: 14px;"></span></p> フィールドは必須です。これは、「プリフライト」でブラウザによって要求されたフィールドに限定されず、サーバーによってサポートされるすべてのヘッダー フィールドを示すカンマ区切りの文字列でもあります。 Access-Control-Allow-Credentials: 単純なリクエストと同じ意味を持ちます。
Access-Control-Max-Age: このプリフライトリクエストの有効期間。
🎜🎜CORS は JSONP と同じ目的を持ちますが、JSONP よりも強力です。 🎜🎜🎜🎜JSONP は 🎜🎜GET🎜🎜 リクエストのみをサポートしますが、CORS はすべての種類の HTTP リクエストをサポートします。 JSONP の利点は、古いブラウザをサポートし、CORS をサポートしていない Web サイトからデータを要求できることです。 🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜🎜🎜Jsを使用して遅延読み込みとクロスドメインを実装する手順🎜🎜🎜🎜🎜Jsのクロスドメインを理解する方法🎜🎜🎜🎜laravelのクロスドメイン機能を有効にする方法を説明する🎜 🎜 🎜🎜 |
