cdnjson跨域,nodejs 跨域

本文目錄一覽：

• 1、怎麼解決跨域問題
• 2、如何可以跨域訪問靜態json文件呢?
• 3、JSON怎麼跨域

怎麼解決跨域問題

1、 通過jsonp跨域

JSONP（JSON with Padding：填充式JSON)，應用JSON的一種新方法，

JSON、JSONP的區別：

1、JSON返回的是一串數據、JSONP返回的是腳本代碼(包含一個函數調用)

2、JSONP 只支持get請求、不支持post請求

(類似往頁面添加一個script標籤，通過src屬性去觸發對指定地址的請求,故只能是Get請求)

2、代理：

需要調用，可以寫一個接口，由這個接口在後端去調用並拿到返回值，然後再返回給index.html

3、PHP端修改header

header(‘Access-Control-Allow-Origin:*’);//允許所有來源訪問

header(‘Access-Control-Allow-Method:POST,GET’);//允許訪問的方式

4、document.domain

跨域分為兩種，一種xhr不能訪問不同源的文檔，另一種是不同window之間不能進行交互操作;

document.domain主要是解決第二種情況，且只能適用於主域相同子域不同的情況；

document.domain的設置是有限制的，我們只能把document.domain設置成自身或更高一級的父域，且主域必須相同。例如：a.b.example.com中某個文檔的document.domain可以設成a.b.example.com、b.example.com 、example.com中的任意一個，但是不可以設成c.a.b.example.com，因為這是當前域的子域，也不可以設成baidu.com，因為主域已經不相同了。

兼容性：所有瀏覽器都支持；

優點：

　可以實現不同window之間的相互訪問和操作；

缺點：

　只適用於父子window之間的通信，不能用於xhr；

　只能在主域相同且子域不同的情況下使用；

使用方式：

　不同的框架之間是可以獲取window對象的，但卻無法獲取相應的屬性和方法。比如，有一個頁面，它的地址是 ， 在這個頁面裡面有一個iframe，它的src是, 很顯然，這個頁面與它裡面的iframe框架是不同域的，所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的：

script type=”text/javascript”

function test(){

var iframe = document.getElementById(‘ifame’);

var win = document.contentWindow;//可以獲取到iframe里的window對象，但該window對象的屬性和方法幾乎是不可用的

var doc = win.document;//這裡獲取不到iframe里的document對象

var name = win.name;//這裡同樣獲取不到window對象的name屬性

}

/script

iframe id = “iframe” src=”” onload = “test()”/iframe

這個時候，document.domain就可以派上用場了，我們只要把 和 這兩個頁面的document.domain都設成相同的域名就可以了。

1.在頁面 中設置document.domain:

iframe id = “iframe” src=”” onload = “test()”/iframe

script type=”text/javascript”

document.domain = ‘example.com’;//設置成主域

function test(){

alert(document.getElementById(‘iframe’).contentWindow);//contentWindow 可取得子窗口的 window 對象

}

/script

2.在頁面 中也設置document.domain:

script type=”text/javascript”

document.domain = ‘example.com’;//在iframe載入這個頁面也設置document.domain，使之與主頁面的document.domain相同

/script

5、window.name

關鍵點：window.name在頁面的生命周期里共享一個window.name;

兼容性：所有瀏覽器都支持；

優點：

　最簡單的利用了瀏覽器的特性來做到不同域之間的數據傳遞；

　不需要前端和後端的特殊配製；

缺點：

　大小限制：window.name最大size是2M左右，不同瀏覽器中會有不同約定；

　安全性：當前頁面所有window都可以修改，很不安全；

　數據類型：傳遞數據只能限於字符串，如果是對象或者其他會自動被轉化為字符串，如下；

　這裡寫圖片描述

使用方式：修改window.name的值即可；

6、postMessage

關鍵點：

　postMessage是h5引入的一個新概念，現在也在進一步的推廣和發展中，他進行了一系列的封裝，我們可以通過window.postMessage的方式進行使用，並可以監聽其發送的消息；

兼容性：移動端可以放心用，但是pc端需要做降級處理

優點

　不需要後端介入就可以做到跨域，一個函數外加兩個參數（請求url，發送數據）就可以搞定；

　移動端兼容性好；

缺點

　無法做到一對一的傳遞方式：監聽中需要做很多消息的識別，由於postMessage發出的消息對於同一個頁面的不同功能相當於一個廣播的過程，該頁面的所有onmessage都會收到，所以需要做消息的判斷；

安全性問題：三方可以通過截獲，注入html或者腳本的形式監聽到消息，從而能夠做到篡改的效果，所以在postMessage和onmessage中一定要做好這方面的限制；

　發送的數據會通過結構化克隆算法進行序列化，所以只有滿足該算法要求的參數才能夠被解析，否則會報錯，如function就不能當作參數進行傳遞；

使用方式：通信的函數，sendMessage負責發送消息，bindEvent負責消息的監聽並處理，可以通過代碼來做一個大致了解；

Storage.prototype.sendMessage_ = function(type, params, fn) {

if (this.topWindow) {

this.handleCookie_(type, params, fn);

return;

}

var eventId = this.addToQueue_(fn, type);

var storageIframe = document.getElementById(‘mip-storage-iframe’);

var element = document.createElement(“a”);

element.href = this.origin;

var origin = element.href.slice(0, element.href.indexOf(element.pathname) + 1);

storageIframe.contentWindow.postMessage({

type: type,

params: params,

eventId: eventId

}, origin);

}

Storage.prototype.bindEvent_ = function() {

window.onmessage = function (res) {

// 判斷消息來源

if (window == res.source.window.parent

res.data.type === this.messageType.RES

window.location.href.match(res.origin.host).length 0) {

var fn = this.eventQueue[res.data.eventId];

fn fn();

delete this.eventQueue[res.data.eventId];

// reset id

var isEmpty = true;

for (var t in this.eventQueue) {

isEmpty = false;

}

if (isEmpty) {

this.id = 0;

}

}

}.bind(this);

}

如何可以跨域訪問靜態json文件呢?

直接訪問地址唄,,和請求js,css,圖片的道理是一樣的,

直接訪問出錯的話:

對方禁止跨域請求該文件,即禁止下載

url的映射路徑方式被重寫,比如:地址規格可能為

JSON怎麼跨域

JSON可以跨域，但雙網必須有jsoncallback這個參數約定，

比如

$.getJSON(” +

‘apikey=8b604e5d4841c2cd976241dd90d319d7’ +

‘tag=bestofisotopecallback=?’)

對方必須有callback=?這個約定

如果沒有這個約定，JSON硬直跨域，難度太大，最後你會發現，費了九牛二虎之力還不如用服務器寫個services 去抓取，然後用JSON去請求自己這個services地址，因為服務器不涉及跨域安全性問題，JS 是有這個安全性限制的