jsonp跨域實現的幾種方式(jsonp解決跨域問題)

大家好，jsonp跨域實現的幾種方式相信很多的網友都不是很明白，包括jsonp解決跨域問題也是一樣，不過沒有關系，接下來就來為大家分享關于jsonp跨域實現的幾種方式和jsonp解決跨域問題的一些知識點，大家可以關注收藏，免得下次來找不到哦，下面我們開始吧！

什么是跨域，跨域的實現方式有哪些

查了一些資料，再結合我之前的了解，給大家介紹一下，如果有說的不對的地方，請大家留言指正。

什么是跨域

瀏覽器有一個毛病（策略）：請求url的協議、域名、端口必須相同，才允許訪問（通信），否則就不允許訪問，是跨域。

https(協議)://www.wukong.com(域名和端口)/index.html

比如：

https://www.wukong.com/index.html

http://www.wukong.com/index.html

這樣就不允許通信，因為協議不同。

完整的舉個例子：

你有服務器A和服務器B，服務器A上存著CSS和JS腳本，服務器B上存著HTML，HTML頁面上的CSS和JS都是鏈接的服務器A上面的。

然后用瀏覽器打開服務器B上面的xxx.html，頁面打開后可以正常渲染出樣式，可以運行JS腳本，這樣就是跨域名，跨端口，跨協議。

如何解決跨域

JSONP：利用了script標簽不受同源策略的限制，通過script加載服務器A的資源。

Proxy代理：使用服務器接口做代理，因為同源策略之針對瀏覽器。

CORS：跨域資源共享，這個就是瀏覽器后悔了，出了一個跨域訪問機制（XMLHttpRequest），低版本IE不支持。

Postmessage：HTML5新增的跨域機制。

Nginx反向代理：相當于Proxy代理。

希望我的回答可以幫助到你！

什么是JS跨域訪問

跨域只要滿足以下條件之一就是跨域：

1、協議不同，如一個http，一個https；

2、域名不同，包括主域和子域如www.a.com和ppp.a.com

3、端口不同，如w.a.com:3000和w.a.com:3001

只要出現以上情況之一就是跨域。

解決跨域的方法很多：

1、ng代理（常用）

2、node代理（前端開發時用）

3、服務端設置允許跨域訪問（常用）

4、jsonp解決（現在比較少用）

5、iframe解決（比較少用）

具體沒種方法自行百度，就不一一解釋

H5中引入外鏈js會跨域嗎

會跨域因為瀏覽器中的同源策略限制了外部域名與當前域名的交互，H5中引入外鏈js會導致瀏覽器對當前域名和外部域名的不同源進行限制，因此會發生跨域。同時，當需要跨域時，可以使用JSONP、CORS、postMessage等跨域解決方案來進行處理，以實現跨域請求和數據交互。需要注意的是，跨域請求會增加安全風險，攻擊者可能通過構造特定請求來獲取網站敏感信息，因此需要在開發中仔細處理跨域問題。

如何實現跨域及其原理

一、什么是跨域？1.什么是同源策略及其限制內容？

同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。同源策略限制內容有：

Cookie、LocalStorage、IndexedDB等存儲性內容DOM節點AJAX請求發送后，結果被瀏覽器攔截了

但是有三個標簽是允許跨域加載資源：

<imgsrc=XXX><linkhref=XXX><scriptsrc=XXX>2.常見跨域場景

當協議、子域名、主域名、端口號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算作“跨域”。

特別說明兩點：

第一：如果是協議和端口造成的跨域問題“前臺”是無能為力的。

第二：在跨域問題上，僅僅是通過“URL的首部”來識別而不會根據域名對應的IP地址是否相同來判斷。“URL的首部”可以理解為“協議,域名和端口必須匹配”。

這里你或許有個疑問：請求跨域了，那么請求到底發出去沒有？

跨域并不是請求發不出去，請求能發出去，服務端能收到請求并正常返回結果，只是結果被瀏覽器攔截了。你可能會疑問明明通過表單的方式可以發起跨域請求，為什么Ajax就不會?因為歸根結底，跨域是為了阻止用戶讀取到另一個域名下的內容，Ajax可以獲取響應，瀏覽器認為這不安全，所以攔截了響應。但是表單并不會獲取新的內容，所以可以發起跨域請求。同時也說明了跨域并不能完全阻止CSRF，因為請求畢竟是發出去了。

二、跨域解決方案1.jsonp1)JSONP原理

利用<script>標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的JSON數據。JSONP請求一定需要對方的服務器做支持才可以。

2)JSONP和AJAX對比

JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬于同源策略，JSONP屬于非同源策略（跨域請求）

3)JSONP優缺點

JSONP優點是簡單兼容性好，可用于解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具有局限性,不安全可能會遭受XSS攻擊。

4)JSONP的實現流程聲明一個回調函數，其函數名(如show)當做參數值，要傳遞給跨域請求數據的服務器，函數形參為要獲取目標數據(服務器返回的data)。創建一個<script>標簽，把那個跨域的API數據接口地址，賦值給script的src,還要在這個地址中向服務器傳遞該函數名（可以通過問號傳參:?callback=show）。服務器接收到請求后，需要進行特殊的處理：把傳遞進來的函數名和它需要給你的數據拼接成一個字符串,例如：傳遞進去的函數名是show，它準備好的數據是show('我不愛你')。最后服務器把準備的數據通過HTTP協議返回給客戶端，客戶端再調用執行之前聲明的回調函數（show），對返回的數據進行操作。

在開發中可能會遇到多個JSONP請求的回調函數名是相同的，這時候就需要自己封裝一個JSONP函數。

上面這段代碼相當于向http://localhost:3000/say?wd=Iloveyou&callback=show這個地址請求數據，然后后臺返回show('我不愛你')，最后會運行show()這個函數，打印出'我不愛你'

5)jQuery的jsonp形式

JSONP都是GET和異步請求的，不存在其他的請求方式和同步請求，且jQuery默認就會給JSONP的請求清除緩存。

2.cors

CORS需要瀏覽器和后端同時支持。IE8和9需要通過XDomainRequest來實現。

瀏覽器會自動進行CORS通信，實現CORS通信的關鍵是后端。只要后端實現了CORS，就實現了跨域。

服務端設置Access-Control-Allow-Origin就可以開啟CORS。該屬性表示哪些域名可以訪問資源，如果設置通配符則表示所有網站都可以訪問資源。

雖然設置CORS和前端沒什么關系，但是通過這種方式解決跨域問題的話，會在發送請求時出現兩種情況，分別為簡單請求和復雜請求。

1)簡單請求

只要同時滿足以下兩大條件，就屬于簡單請求

條件1：使用下列方法之一：

GETHEADPOST

條件2：Content-Type的值僅限于下列三者之一：

text/plainmultipart/form-dataapplication/x-www-form-urlencoded

請求中的任意XMLHttpRequestUpload對象均沒有注冊任何事件監聽器；XMLHttpRequestUpload對象可以使用XMLHttpRequest.upload屬性訪問。

2)復雜請求

不符合以上條件的請求就肯定是復雜請求了。復雜請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求,該請求是option方法的，通過該請求來知道服務端是否允許跨域請求。

我們用PUT向后臺請求時，屬于復雜請求，后臺需做如下配置：

接下來我們看下一個完整復雜請求的例子，并且介紹下CORS請求相關的字段

上述代碼由http://localhost:3000/index.html向http://localhost:4000/跨域請求，正如我們上面所說的，后端是實現CORS通信的關鍵。

3.postMessage

postMessage是HTML5XMLHttpRequestLevel2中的API，且是為數不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：

頁面和其打開的新窗口的數據傳遞多窗口之間消息傳遞頁面與嵌套的iframe消息傳遞上面三個場景的跨域數據傳遞

postMessage()方法允許來自不同源的腳本采用異步方式進行有限的通信，可以實現跨文本檔、多窗口、跨域消息傳遞。

otherWindow.postMessage(message,targetOrigin,[transfer]);

message:將要發送到其他window的數據。targetOrigin:通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示無限制）或者一個URI。在發送消息的時候，如果目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那么消息就不會被發送；只有三者完全匹配，消息才會被發送。transfer(可選)：是一串和message同時傳遞的Transferable對象.這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。

接下來我們看個例子：http://localhost:3000/a.html頁面向http://localhost:4000/b.html傳遞“我愛你”,然后后者傳回"我不愛你"。

4.websocket

Websocket是HTML5的一個持久化的協議，它實現了瀏覽器與服務器的全雙工通信，同時也是跨域的一種解決方案。WebSocket和HTTP都是應用層協議，都基于TCP協議。但是WebSocket是一種雙向通信協議，在建立連接之后，WebSocket的server與client都能主動向對方發送或接收數據。同時，WebSocket在建立連接時需要借助HTTP協議，連接建立好了之后client與server之間的雙向通信就與HTTP無關了。

原生WebSocketAPI使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。

我們先來看個例子：本地文件socket.html向localhost:3000發生數據和接受數據

5.Node中間件代理(兩次跨域)

實現原理：同源策略是瀏覽器需要遵循的標準，而如果是服務器向服務器請求就無需遵循同源策略。代理服務器，需要做以下幾個步驟：

接受客戶端請求。將請求轉發給服務器。拿到服務器響應數據。將響應轉發給客戶端。

我們先來看個例子：本地文件index.html文件，通過代理服務器http://localhost:3000向目標服務器http://localhost:4000請求數據。

上述代碼經過兩次跨域，值得注意的是瀏覽器向代理服務器發送請求，也遵循同源策略，最后在index.html文件打印出{"title":"fontend","password":"123456"}

6.nginx反向代理

實現原理類似于Node中間件代理，需要你搭建一個中轉nginx服務器，用于轉發請求。

使用nginx反向代理實現跨域，是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，并且不會影響服務器性能。

實現思路：通過nginx配置一個代理服務器（域名與domain1相同，端口不同）做跳板機，反向代理訪問domain2接口，并且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。

先下載nginx，然后將nginx目錄下的nginx.conf修改如下:

最后通過命令行nginx-sreload啟動nginx

7.window.name+iframe

window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的name值（2MB）。

其中a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

b.html為中間代理頁，與a.html同域，內容為空。

總結：通過iframe的src屬性由外域轉向本地域，跨域數據即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。

8.location.hash+iframe

實現原理：a.html欲與c.html跨域相互通信，通過中間頁b.html來實現。三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。

具體實現步驟：一開始a.html給c.html傳一個hash值，然后c.html收到hash值后，再把hash值傳遞給b.html，最后b.html將結果放到a.html的hash值中。同樣的，a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

9.document.domain+iframe

該方式只能用于二級域名相同的情況下，比如a.test.com和b.test.com適用于該方式。只需要給頁面添加document.domain='test.com'表示二級域名都相同就可以實現跨域。

實現原理：兩個頁面都通過js強制設置document.domain為基礎主域，就實現了同域。

我們看個例子：頁面a.zf1.cn:3000/a.html獲取頁面b.zf1.cn:3000/b.html中a的值

三、總結CORS支持所有類型的HTTP請求，是跨域HTTP請求的根本解決方案JSONP只支持GET請求，JSONP的優勢在于支持老式瀏覽器，以及可以向不支持CORS的網站請求數據。不管是Node中間件代理還是nginx反向代理，主要是通過同源策略對服務器不加限制。日常工作中，用得比較多的跨域方案是cors和nginx反向代理

大家都是如何解決javascript跨域訪問的

首先你要知道什么是javascript跨域，跨域是因為受到了瀏覽器同源策略的限制，同源策略要求源相同才能進行通信，就是協議,域名,端口號都完全一致。同源策略具體會限制兩種場景，第一種是不能向不同源的服務發請求，第二種就是不能獲得不同源的document,cookie等BOM,DOM。我們一般解決的跨域，都是解決第一種場景。解決第一種場景我知道的常用方法有三種方法，

1.最常用的CORS

CORS其實就是在服務器直接配置，在請求的響應頭帶上CORS，允許的源包括本網站，這樣就可以讓瀏覽器不攔截請求的響應了。

Access-Control-Allow-Origin:*

2.JSONP

JSONP利用的是script標簽能夠跨域，在script的src后面加一個回調函數，這個script請求回來可以執行的javascript文本。

3.nginx轉發

nginx轉發是比較安全也是公司里面經常用的方法，只要在nginx的配置文件里面，把前端的請求轉發到跨域的服務器IP地址就可以啦

END，本文到此結束，如果可以幫助到大家，還望關注本站哦！