資訊專欄INFORMATION COLUMN
摘要：產(chǎn)生跨域問題的原因跨域問題是瀏覽器同源策略限制，當(dāng)前域名的只能讀取同域下的窗口屬性。比如，其中是協(xié)議名，是子域名，是主域名，端口號(hào)是，當(dāng)在在頁(yè)面中從一個(gè)請(qǐng)求數(shù)據(jù)時(shí)，如果這個(gè)的協(xié)議名子域名主域名端口號(hào)任意一個(gè)有一個(gè)不同，就會(huì)產(chǎn)生跨域問題。
產(chǎn)生跨域問題的原因
跨域問題是瀏覽器同源策略限制，當(dāng)前域名的js只能讀取同域下的窗口屬性。
跨域問題產(chǎn)生的場(chǎng)景當(dāng)要在在頁(yè)面中使用js獲取其他網(wǎng)站的數(shù)據(jù)時(shí)，就會(huì)產(chǎn)生跨域問題，比如在網(wǎng)站中使用ajax請(qǐng)求其他網(wǎng)站的天氣、快遞或者其他數(shù)據(jù)接口時(shí)以及hybrid app中請(qǐng)求數(shù)據(jù)，瀏覽器就會(huì)提示以下錯(cuò)誤。這種場(chǎng)景下就要解決js的跨域問題。
XMLHttpRequest cannot load http://你請(qǐng)求的域名. No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "http://當(dāng)前頁(yè)的域名" is therefore not allowed access.哪些情況會(huì)產(chǎn)生跨域問題
一個(gè)網(wǎng)站的網(wǎng)址組成包括協(xié)議名，子域名，主域名，端口號(hào)。比如 https://github.com/ ，其中https是協(xié)議名，www是子域名，github是主域名，端口號(hào)是80，當(dāng)在在頁(yè)面中從一個(gè)url請(qǐng)求數(shù)據(jù)時(shí)，如果這個(gè)url的協(xié)議名、子域名、主域名、端口號(hào)任意一個(gè)有一個(gè)不同，就會(huì)產(chǎn)生跨域問題。
即使是在 http://localhost:80/ 頁(yè)面請(qǐng)求 http://127.0.0.1:80/ 也會(huì)有跨域問題
解決跨域問題有以下一種方式
使用jsonp
服務(wù)端代理
服務(wù)端設(shè)置Request Header頭中Access-Control-Allow-Origin為指定可獲取數(shù)據(jù)的域名
jsonp的解決方式json≠jsonp
原理jsonp解決跨域問題的原理是，瀏覽器的script標(biāo)簽是不受同源策略限制(你可以在你的網(wǎng)頁(yè)中設(shè)置script的src屬性問cdn服務(wù)器中靜態(tài)文件的路徑)。那么就可以使用script標(biāo)簽從服務(wù)器獲取數(shù)據(jù)，請(qǐng)求時(shí)添加一個(gè)參數(shù)為callbakc=?，?號(hào)時(shí)你要執(zhí)行的回調(diào)方法。
前端實(shí)現(xiàn)以jQuery2.1.3的ajax方法為例
javascript$.ajax({
url:"",
dataType:"jsonp",
data:{
params:""
}
}).done(function(data){
//dosomething..
})
僅僅是客戶端使用jsonp請(qǐng)求數(shù)據(jù)是不行的，因?yàn)閖sonp的請(qǐng)求是放在script標(biāo)簽中的，和普通請(qǐng)求不同的地方在于，它請(qǐng)求到的是一段js代碼，如果服務(wù)端返回了json字符串，那么瀏覽器就會(huì)報(bào)錯(cuò)。所以jsonp返回?cái)?shù)據(jù)需要服務(wù)端做一些處理。
服務(wù)端返回?cái)?shù)據(jù)處理上面說了jsonp的原理是利用script標(biāo)簽來解決跨域，但是script標(biāo)簽是用來獲取js代碼的，那么我們?cè)趺传@取到請(qǐng)求的數(shù)據(jù)呢。
這就需要服務(wù)端做一些判斷，當(dāng)參數(shù)中帶有callback屬性時(shí)，返回的type要為application/javascript,把數(shù)據(jù)作為callback的參數(shù)執(zhí)行。下面是jsonp返回的數(shù)據(jù)的格式示例
javascript/**/ typeof jQuery21307270454438403249_1428044213638 === "function" && jQuery21307270454438403249_1428044213638({"code":1,"msg":"success","data":{"test":"test"}});
這是express4.12.3關(guān)于jsonp的實(shí)現(xiàn)代碼
javascript // jsonp
if (typeof callback === "string" && callback.length !== 0) {
this.charset = "utf-8";
this.set("X-Content-Type-Options", "nosniff");
this.set("Content-Type", "text/javascript");
// restrict callback charset
callback = callback.replace(/[^[]w$.]/g, "");
// replace chars not allowed in JavaScript that are in JSON
body = body
.replace(/u2028/g, "u2028")
.replace(/u2029/g, "u2029");
// the /**/ is a specific security mitigation for "Rosetta Flash JSONP abuse"
// the typeof check is just to reduce client error noise
body = "/**/ typeof " + callback + " === "function" && " + callback + "(" + body + ");";
}
服務(wù)端設(shè)置Access-Control-Allow-Origin
這種方式只要服務(wù)端把response的header頭中設(shè)置Access-Control-Allow-Origin為制定可請(qǐng)求當(dāng)前域名下數(shù)據(jù)的域名即可。一般情況下設(shè)為即可。這樣客戶端就不需要使用jsonp來獲取數(shù)據(jù)。
關(guān)于Access-Control-Allow-Origin設(shè)為是否會(huì)有安全問題，知乎上有個(gè)討論。
瀏覽器支持http://www.zhihu.com/question/22992229
Access-Control-Allow-Origin是html5新增的一項(xiàng)標(biāo)準(zhǔn)，IE10以下是不支持的，所以如果產(chǎn)品面向的是PC端，就要使用服務(wù)端代理或jsonp。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85617.html
摘要：關(guān)于，強(qiáng)烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個(gè)實(shí)現(xiàn)原理圖簡(jiǎn)化版如何判斷是否是簡(jiǎn)單請(qǐng)求瀏覽器將請(qǐng)求分成兩類簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。 前言 從剛接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過N個(gè)跨域相關(guān)的問題了，16年時(shí)也整理過一篇相關(guān)文章，但是感覺還是差了點(diǎn)什么，于是現(xiàn)在重新梳理了一下。 個(gè)人見識(shí)有限，如有差錯(cuò)，請(qǐng)多多見諒，歡迎提出iss...
摘要：同源策略，它是由提出的一個(gè)著名的安全策略，現(xiàn)在所有支持的瀏覽器都會(huì)使用這個(gè)策略?？蛻舳嗽趯?duì)文件調(diào)用成功之后，也就獲得了自己所需的數(shù)據(jù)，剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了，這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來非常像，但其實(shí)并不一樣。 參考資料 一、先說說JSON 首先JSON是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式。 JSON的優(yōu)點(diǎn)： 基于純文本，跨平臺(tái)傳遞極其簡(jiǎn)單； Javas...
摘要：設(shè)置的值，為其當(dāng)前域或其當(dāng)前域的父域。場(chǎng)景文檔中的一個(gè)腳本執(zhí)行以下語(yǔ)句即可通過同源檢測(cè)跨源網(wǎng)絡(luò)訪問同源策略控制了不同源之間的交互。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的請(qǐng)求。 文章大綱 同源策略 同源是什么？ 如何跨源，以及場(chǎng)景應(yīng)用 源的更改 跨源網(wǎng)絡(luò)訪問 跨源腳本API訪問 跨源數(shù)據(jù)存儲(chǔ)訪問 了解CORS CORS是什么？ CORS功能概述 CORS關(guān)于Cookie ...
首先聲明一下，本文不是要講解fetch的具體用法，不清楚的可以參考MDN fetch教程。 引言 說道fetch就不得不提XMLHttpRequest了，XHR在發(fā)送web請(qǐng)求時(shí)需要開發(fā)者配置相關(guān)請(qǐng)求信息和成功后的回調(diào)，盡管開發(fā)者只關(guān)心請(qǐng)求成功后的業(yè)務(wù)處理，但是也要配置其他繁瑣內(nèi)容，導(dǎo)致配置和調(diào)用比較混亂，也不符合關(guān)注分離的原則；fetch的出現(xiàn)正是為了解決XHR存在的這些問題。例如下面代碼： f...
摘要：摘自阮一峰博客延伸閱讀不涉及跨域跨源資源分享為標(biāo)準(zhǔn)兼容性參考優(yōu)點(diǎn)提供安全的跨域數(shù)據(jù)傳輸，且不限于請(qǐng)求。跨域資源共享阿里云技術(shù)文檔跨域資源共享詳解阮一峰 參考：維基百科 - Root domainhttps://en.wikipedia.org/wiki...瀏覽器同源政策及其規(guī)避方法 - 阮一峰http://www.ruanyifeng.com/blo...window.name 跨域...
閱讀 1045·2021-09-22 15:26
閱讀 2624·2021-09-09 11:52
閱讀 1916·2021-09-02 09:52
閱讀 2254·2021-08-12 13:28
閱讀 1192·2019-08-30 15:53
閱讀 521·2019-08-29 13:47
閱讀 3393·2019-08-29 11:00
閱讀 3105·2019-08-29 10:58
