When making oneday-music-player, I need to use ajax to send a request to Baidu Music's api, and then XMLHttpRequest cannot load 'http://....' . No 'Access-Control-Allow' appears. -Origin' header is present on the request resource. Origin 'http://....' is therefore not allowed access. After searching, it was found that it was a cross-domain problem caused by the same origin policy, so learn about Cross-domain knowledge points.

Same Origin Policy

The Same Origin Policy restricts documents or scripts loaded from one source from interacting with documents or scripts from another source. method is an important security mechanism for isolating potentially malicious files.

When two pages have the same protocol, port (if specified) and domain name, they can be said to have the same origin.

The following table is relative to <span style="font-size: 14px;">http://store.company.com/dir/page.html</span> Example of same-origin detection:

If it is not from the same origin, three behaviors will be restricted:

• ##Cookie, LocalStorage and IndexDB cannot be read<span style="font-size: 14px;"></span>

• DOM cannot be obtained<span style="font-size: 14px;"></span>

• AJAX request cannot be sent<span style="font-size: 14px;"></span>

Avoid the same-origin policy (cross-domain)<span style="font-size: 14px;"></span>

Cookie<span style="font-size: 14px;"></span>

document.domain<span style="font-size: 14px;"></span>

Cookie is a small piece of information written by the server to the browser, which can only be shared by web pages of the same hospital. However, the first-level domain names of the two web pages are the same, but the second-level domain names are different. The browser allows sharing of cookies through <span style="font-size: 14px;"></span>document.domain<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span>

For example, suppose a script in the document executes the following statement at <span style="font-size: 14px;"></span>http://store.company.com/dir/page.html<span style="font-size: 14px;"></span> ：<span style="font-size: 14px;"></span>

<span style="font-size: 14px;">document.domain = "company.com"<br></span>

At this time,<span style="font-size: 14px;"></span>http://news.company.com/dir/other.html<span style="font-size: 14px;"></span> and<span style="font-size: 14px;"></span>http://store.company.com/dir/other.html<span style="font-size: 14px;"></span>
can be passed<span style="font-size: 14px;"></span>document .cookie<span style="font-size: 14px;"></span> to set or get cookies, that is, shared cookies. <span style="font-size: 14px;"></span>

But this method applies to Cookie and iframe windows, LocalStorage and IndexDB cannot circumvent the same origin policy through this method. <span style="font-size: 14px;"></span>

iframe<span style="font-size: 14px;"></span>

If two web pages have different sources, they cannot get each other’s DOM. A typical example is <span style="font-size: 14px;"></span> If the iframe<span style="font-size: 14px;"></span> window and the window opened by the <span style="font-size: 14px;"></span>window.open<span style="font-size: 14px;"></span> method are not from the same source as the parent window, it will Report an error. <span style="font-size: 14px;"></span>

At this time, if the first-level domain name of the two windows is the same, but the second-level domain name is different, then set <span style="font-size: 14px;"></span>document.domain<span style="font-size: 14px;"></span>Attribute, you can circumvent the same-origin policy. <span style="font-size: 14px;"></span>

For websites with completely different origins, there are currently three methods to solve the communication problem between cross-domain windows. <span style="font-size: 14px;"></span>

• fragment identifier<span style="font-size: 14px;"></span>

• window.name<span style="font-size: 14px;"></span>

• Cross-document messaging API<span style="font-size: 14px;"></span>

Fragment identifier<span style="font-size: 14px;"></span>

The fragment identifier refers to the part after # in the URL, that is, <span style="font-size: 14px;"></span>http://store.company.com/dir/other.html# fragment<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span>#fragment<span style="font-size: 14px;"></span>(location.hash), if only the fragment identifier is changed, the page will not be refreshed. <span style="font-size: 14px;"></span>

The parent window can write information to the fragment identifier of the child window, and the child window listens to the <span style="font-size: 14px;"></span>hashchange<span style="font-size: 14px;"></span> event Get notified. <span style="font-size: 14px;"></span>

window.name<span style="font-size: 14px;"></span>

Each iframe has a window that wraps it. This window is a child window of the top window, so naturally <span style="font-size: 14px;"></span>window.name<span style="font-size: 14px;"></span> attribute refers to the name of the current window. The biggest feature of this attribute is that, regardless of whether it has the same source or not, as long as the window is in the same window, All pages within have read and write permissions for window.name. <span style="font-size: 14px;"></span>

The value of window.name can only be in the form of a string. The maximum capacity of this string can be about 2M or even larger, depending on different browsers. <span style="font-size: 14px;"></span>

例如，想要在<span style="font-size: 14px;">http://example/a.html</span>中獲取<span style="font-size: 14px;">http://company.com/data.html</span>中的數(shù)據(jù)，可以在a.html中使用一個(gè)隱藏的iframe，將iframe的src首先設(shè)置為<span style="font-size: 14px;">http://company.com/data.html</span>，將其window.name設(shè)置為所需的數(shù)據(jù)內(nèi)容，隨后再將這個(gè)iframe的src設(shè)置為跟a.html頁(yè)面同一個(gè)域的一個(gè)頁(yè)面，不然a.html獲取不到該iframe的window.name

<span style="font-size: 14px;">window.postMessage</span>

這是html5中新引入的一個(gè)API，可以使用它向其它的window對(duì)象發(fā)送消息，無(wú)論這個(gè)window對(duì)象屬于同源還是不同源。

例如，父窗口<span style="font-size: 14px;">http://example/a.html</span>向子窗口<span style="font-size: 14px;">http://company.com/data.html</span>發(fā)送消息：

<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>方法的第一個(gè)參數(shù)是具體的信息內(nèi)容，第二個(gè)參數(shù)是接收消息的窗口的源，即<span style="font-size: 14px;">協(xié)議</span>+<span style="font-size: 14px;">端口</span>+<span style="font-size: 14px;">域名</span>，也可以設(shè)置為<span style="font-size: 14px;">*</span>，表示不限制域名。

子窗口向父窗口發(fā)送消息的寫法類似：

<span style="font-size: 14px;">window.opener.postMessage('Nice to see you', 'http://example/a.html')<br></span>

子窗口和父窗口都可以通過(guò)<span style="font-size: 14px;">message</span>時(shí)間，監(jiān)聽對(duì)方的消息。

<span style="font-size: 14px;">window.addEventListener('message', function(e) {<br> ? ?// ...<br>}, false)<br></span>

<span style="font-size: 14px;">message</span>事件的事件對(duì)象<span style="font-size: 14px;">event</span>有以下三個(gè)屬性：

• event.source: 發(fā)送消息的窗口

• event.origin: 消息發(fā)向的網(wǎng)址（可以限制目標(biāo)網(wǎng)址）

• event.data: 消息內(nèi)容

通過(guò)<span style="font-size: 14px;">window.postMessage</span>，也可以讀寫其他窗口的<span style="font-size: 14px;">localStorage</span>

AJAX

同源策略規(guī)定，AJAX請(qǐng)求只能發(fā)給同源的網(wǎng)址，否則就報(bào)錯(cuò)，但是有三種方法可以規(guī)避這個(gè)限定：

• JSONP

• WebSocket

• CORS

JSONP

JSONP是服務(wù)器與客戶端跨源通信的常用方法?；舅枷胧抢?/span><span style="font-size: 14px;"><script></span>請(qǐng)求腳本能夠跨域訪問(wèn)的特性，先定義了一個(gè)回調(diào)方法，然后將其作為url參數(shù)的一部分發(fā)送到服務(wù)端，服務(wù)端通過(guò)字符串拼接的方式將數(shù)據(jù)包裹在回調(diào)方法中，再返回回來(lái)。

<span style="font-size: 14px;">// 網(wǎng)頁(yè)動(dòng)態(tài)插入`<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是一種通信協(xié)議，使用<span style="font-size: 14px;">ws://</span>（非加密）和<span style="font-size: 14px;">wss://</span>（加密）作為協(xié)議前綴。該協(xié)議不實(shí)行同源政策，只要服務(wù)支持，就可以通過(guò)它進(jìn)行跨源通信。

瀏覽器發(fā)出的WebSocket請(qǐng)求的頭信息中含有<span style="font-size: 14px;">Origin</span>字段，表示該請(qǐng)求的請(qǐng)求源，即發(fā)自哪個(gè)域名。（加入白名單）

CORS

跨域資源共享（Cross-Origin Resource Sharing，CORS）是一種使用額外的HTTP頭來(lái)使一個(gè)用戶代理從一個(gè)不同于當(dāng)前站點(diǎn)（域）的服務(wù)器獲取指定的資源的機(jī)制。用戶代理使用跨域HTTP請(qǐng)求來(lái)獲取與當(dāng)前文檔不同域、不用協(xié)議或端口的資源。

出于安全考慮，瀏覽器會(huì)限制從腳本內(nèi)發(fā)起的跨域HTTP請(qǐng)求。而跨域資源共享（CORS）機(jī)制允許web應(yīng)用服務(wù)器進(jìn)行跨域訪問(wèn)控制，從而使跨域數(shù)據(jù)傳輸?shù)靡园踩M(jìn)行。瀏覽器支持在API容器中（例如<span style="font-size: 14px;">XMLHttpRequest</span>或<span style="font-size: 14px;">Fetch</span>）使用CORS，以降低跨域HTTP請(qǐng)求所帶來(lái)的風(fēng)險(xiǎn)。

跨域資源共享標(biāo)準(zhǔn)允許在下列場(chǎng)景中使用跨域HTTP請(qǐng)求：

• 由XMLHttpRequest或Fetch發(fā)起的跨域HTTP請(qǐng)求；

• web字體（CSS中通過(guò)<span style="font-size: 14px;">@font-face</span>使用跨域字體資源），因此，網(wǎng)站就可以發(fā)布TrueType字體資源，并只允許已授權(quán)網(wǎng)站進(jìn)行跨站調(diào)用；

• WebGL貼圖；

• 使用drawImage將Images/video畫面繪制到canvas；

• 樣式表（使用CSSOM）；

• Scripts（未處理的異常）。

瀏覽器將CORS請(qǐng)求分成兩類：簡(jiǎn)單請(qǐng)求(simple request)和非簡(jiǎn)單請(qǐng)求(not-so-simple request)

只要同時(shí)滿足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求：

1 請(qǐng)求方法是以下三種方法之一：

<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:(只限三個(gè)值：application/x-www-form-urlencoded、multipart/from-data、text/plain)<br></span>

只要不同時(shí)滿足上面兩個(gè)條件，就屬于非簡(jiǎn)單請(qǐng)求

簡(jiǎn)單請(qǐng)求

對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器會(huì)在請(qǐng)求頭部增加一個(gè)<span style="font-size: 14px;">Origin</span>字段。這個(gè)字段用來(lái)說(shuō)明本次請(qǐng)求來(lái)自哪個(gè)源（協(xié)議+域名+端口）。服務(wù)器根據(jù)這個(gè)值決定是否同意這次請(qǐng)求。

如果<span style="font-size: 14px;">Origin</span>指定的源不在許可范圍內(nèi)，服務(wù)器會(huì)返回一個(gè)正常的HTTP回應(yīng)。而這個(gè)回應(yīng)的頭信息不包含<span style="font-size: 14px;">Access-Control-Allow-Origin</span>字段，從而會(huì)拋出錯(cuò)誤被<span style="font-size: 14px;">XMLHttpRequest</span>的<span style="font-size: 14px;">onerror</span>函數(shù)捕獲，（回應(yīng)的狀態(tài)碼有可能是200）。

如果<span style="font-size: 14px;">Origin</span>指定的域名在許可范圍內(nèi)，服務(wù)器返回的響應(yīng)，會(huì)多出幾個(gè)頭信息字段

<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>: 必須。值要么是請(qǐng)求時(shí)<span style="font-size: 14px;">Origin</span>的值，要么是'*'

• <span style="font-size: 14px;">Access-Control-Allow-Credentials</span>: 可選。布爾值，決定是否允許發(fā)送Cookie，不需要?jiǎng)t刪除該字段。

• <span style="font-size: 14px;">Access-Control-Expose-Headers</span>: 可選。CORS請(qǐng)求時(shí)，<span style="font-size: 14px;">XMLHttpRequest</span>對(duì)象的 <span style="font-size: 14px;">getResponseHeader()</span>方法只能拿到6個(gè)基本字段：<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請(qǐng)求默認(rèn)不發(fā)送Cookie和HTTP認(rèn)證信息。如果要把Cookie發(fā)送到服務(wù)器，一方面要服務(wù)器同意，指定<span style="font-size: 14px;">Access-Control-Allow-Credentials</span>字段，另一方面，開發(fā)者需要在AJAX請(qǐng)求中設(shè)置<span style="font-size: 14px;">withCredentials</span>屬性：

<span style="font-size: 14px;">var xhr = new XMLHttpRequest()<br>xhr.withCredentials = true<br></span>

否則，即使服務(wù)器同意發(fā)送Cookie，瀏覽器也不會(huì)發(fā)送。

需要注意的是，如果要發(fā)送Cookie，<span style="font-size: 14px;">Access-Control-Allow-Origin</span>就不能設(shè)為星號(hào)，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。同時(shí)，Cookie依然遵循同源策略，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳，其他域名的Cookie并不會(huì)上傳，且跨域的原網(wǎng)頁(yè)中的<span style="font-size: 14px;">document.cookie</span>操作也無(wú)法獲取嗷服務(wù)器域名下的Cookie。

非簡(jiǎn)單請(qǐng)求

非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求，比如請(qǐng)求方法是<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>。

非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前，增加一次HTTP查詢請(qǐng)求，稱為“預(yù)檢”請(qǐng)求。

瀏覽器先詢問(wèn)服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP操作和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的<span style="font-size: 14px;">XMLHttpRequest</span>請(qǐng)求，否則就報(bào)錯(cuò)。

“預(yù)檢”請(qǐng)求用請(qǐng)求方法是<span style="font-size: 14px;">OPTIONS</span>，表示這個(gè)請(qǐng)求是用來(lái)詢問(wèn)的。頭信息里面，關(guān)鍵字段是<span style="font-size: 14px;">Origin</span>，表示請(qǐng)求來(lái)自哪個(gè)源。

還有以下兩個(gè)特殊字段：

• <span style="font-size: 14px;">Access-Control-Request-Method</span>: 必須。列出非簡(jiǎn)單請(qǐng)求的請(qǐng)求類型

• <span style="font-size: 14px;">Access-Control-Request-Headers</span>: 非簡(jiǎn)單請(qǐng)求額外攜帶的頭信息字段。

服務(wù)器返回的響應(yīng)：

<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: 必須。逗號(hào)分隔的一個(gè)字符串，表明服務(wù)器支持的所有跨域請(qǐng)求的方法。為了避免多次“預(yù)檢”行為。

• Access-Control-Expose-Headers: If the browser request includes <span style="font-size: 14px;">Access-Control-Request-Headers</span> field, the <span style="font-size: 14px;">Access-Control-Allow-Headers</span> field is required. It is also a comma-separated string indicating all header fields supported by the server, not limited to the fields requested by the browser in "preflight".

• Access-Control-Allow-Credentials: has the same meaning as a simple request.

• Access-Control-Max-Age: The validity period of this preflight request.

Comparison of CORS and JSONP

CORS has the same purpose as JSONP, but is more powerful than JSONP.

JSONP only supports <span style="font-size: 14px;">GET</span> requests, CORS supports all types of HTTP requests. The advantage of JSONP is that it supports older browsers and can request data from websites that do not support CORS.

Related recommendations:

Steps to implement lazy loading and cross-domain implementation using Js

How to understand Js cross-domain

Detailed explanation of how to enable laravel's cross-domain function

The above is the detailed content of Cross-domain methods in js. For more information, please follow other related articles on the PHP Chinese website!