c JSON跨域是指,當(dāng)我們使用 JavaScript 從外部網(wǎng)站獲取 JSON 數(shù)據(jù)時(shí),由于瀏覽器的同源策略限制,會(huì)造成訪問(wèn)被阻止。 這時(shí),我們需要使用 CORS 或 JSONP 這兩種解決方案,來(lái)解決跨域問(wèn)題。
其中,CORS 方案是屬于瀏覽器層面的解決方案,必須要后端設(shè)置 Access-Control-Allow-Origin 頭部信息,才能實(shí)現(xiàn)跨域。而 JSONP 則是通過(guò)動(dòng)態(tài)創(chuàng)建 script 標(biāo)簽的方式來(lái)獲取數(shù)據(jù),因此并不受瀏覽器同源策略的限制。
// CORS 方案例子 const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/api/data'); xhr.onload = function() { if (xhr.status === 200) { const data = JSON.parse(xhr.responseText); console.log(data); } }; xhr.send(); // JSONP 方案例子 function handleData(data) { console.log(data); } const script = document.createElement('script'); script.src = 'http://example.com/api/data?callback=handleData'; document.body.appendChild(script);
以上是兩種常見(jiàn)的解決方案,但也需要注意一些問(wèn)題。比如,CORS 方案雖然是更規(guī)范的方法,但需要后端設(shè)置頭部信息,否則前端也無(wú)法訪問(wèn)。而 JSONP 方案雖然無(wú)需后端支持,但存在安全性問(wèn)題,容易受到 XSS 攻擊。
所以,在實(shí)際開發(fā)中,應(yīng)該綜合考慮具體情況,來(lái)選擇最合適的解決方案。