資訊專欄INFORMATION COLUMN
摘要：產生跨域問題的原因跨域問題是瀏覽器同源策略限制，當前域名的只能讀取同域下的窗口屬性。比如，其中是協議名，是子域名，是主域名，端口號是，當在在頁面中從一個請求數據時，如果這個的協議名子域名主域名端口號任意一個有一個不同，就會產生跨域問題。
產生跨域問題的原因
跨域問題是瀏覽器同源策略限制，當前域名的js只能讀取同域下的窗口屬性。
跨域問題產生的場景當要在在頁面中使用js獲取其他網站的數據時，就會產生跨域問題，比如在網站中使用ajax請求其他網站的天氣、快遞或者其他數據接口時以及hybrid app中請求數據，瀏覽器就會提示以下錯誤。這種場景下就要解決js的跨域問題。
XMLHttpRequest cannot load http://你請求的域名. No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "http://當前頁的域名" is therefore not allowed access.哪些情況會產生跨域問題
一個網站的網址組成包括協議名，子域名，主域名，端口號。比如 https://github.com/ ，其中https是協議名，www是子域名，github是主域名，端口號是80，當在在頁面中從一個url請求數據時，如果這個url的協議名、子域名、主域名、端口號任意一個有一個不同，就會產生跨域問題。
即使是在 http://localhost:80/ 頁面請求 http://127.0.0.1:80/ 也會有跨域問題
解決跨域問題有以下一種方式
使用jsonp
服務端代理
服務端設置Request Header頭中Access-Control-Allow-Origin為指定可獲取數據的域名
jsonp的解決方式json≠jsonp
原理jsonp解決跨域問題的原理是，瀏覽器的script標簽是不受同源策略限制(你可以在你的網頁中設置script的src屬性問cdn服務器中靜態文件的路徑)。那么就可以使用script標簽從服務器獲取數據，請求時添加一個參數為callbakc=?，?號時你要執行的回調方法。
前端實現以jQuery2.1.3的ajax方法為例
javascript$.ajax({
url:"",
dataType:"jsonp",
data:{
params:""
}
}).done(function(data){
//dosomething..
})
僅僅是客戶端使用jsonp請求數據是不行的，因為jsonp的請求是放在script標簽中的，和普通請求不同的地方在于，它請求到的是一段js代碼，如果服務端返回了json字符串，那么瀏覽器就會報錯。所以jsonp返回數據需要服務端做一些處理。
服務端返回數據處理上面說了jsonp的原理是利用script標簽來解決跨域，但是script標簽是用來獲取js代碼的，那么我們怎么獲取到請求的數據呢。
這就需要服務端做一些判斷，當參數中帶有callback屬性時，返回的type要為application/javascript,把數據作為callback的參數執行。下面是jsonp返回的數據的格式示例
javascript/**/ typeof jQuery21307270454438403249_1428044213638 === "function" && jQuery21307270454438403249_1428044213638({"code":1,"msg":"success","data":{"test":"test"}});
這是express4.12.3關于jsonp的實現代碼
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 + ");";
}
服務端設置Access-Control-Allow-Origin
這種方式只要服務端把response的header頭中設置Access-Control-Allow-Origin為制定可請求當前域名下數據的域名即可。一般情況下設為即可。這樣客戶端就不需要使用jsonp來獲取數據。
關于Access-Control-Allow-Origin設為是否會有安全問題，知乎上有個討論。
瀏覽器支持http://www.zhihu.com/question/22992229
Access-Control-Allow-Origin是html5新增的一項標準，IE10以下是不支持的，所以如果產品面向的是PC端，就要使用服務端代理或jsonp。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85617.html
摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。 前言 從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。 個人見識有限，如有差錯，請多多見諒，歡迎提出iss...
摘要：同源策略，它是由提出的一個著名的安全策略，現在所有支持的瀏覽器都會使用這個策略?？蛻舳嗽趯ξ募{用成功之后，也就獲得了自己所需的數據，剩下的就是按照自己需求進行處理和展現了，這種獲取遠程數據的方式看起來非常像，但其實并不一樣。 參考資料 一、先說說JSON 首先JSON是一種基于文本的數據交換方式，或者叫做數據描述格式。 JSON的優點： 基于純文本，跨平臺傳遞極其簡單； Javas...
摘要：設置的值，為其當前域或其當前域的父域。場景文檔中的一個腳本執行以下語句即可通過同源檢測跨源網絡訪問同源策略控制了不同源之間的交互。服務器確認允許之后，才發起實際的請求。 文章大綱 同源策略 同源是什么？ 如何跨源，以及場景應用 源的更改 跨源網絡訪問 跨源腳本API訪問 跨源數據存儲訪問 了解CORS CORS是什么？ CORS功能概述 CORS關于Cookie ...
首先聲明一下，本文不是要講解fetch的具體用法，不清楚的可以參考MDN fetch教程。 引言 說道fetch就不得不提XMLHttpRequest了，XHR在發送web請求時需要開發者配置相關請求信息和成功后的回調，盡管開發者只關心請求成功后的業務處理，但是也要配置其他繁瑣內容，導致配置和調用比較混亂，也不符合關注分離的原則；fetch的出現正是為了解決XHR存在的這些問題。例如下面代碼： f...
閱讀 1030·2021-09-22 15:26
閱讀 2607·2021-09-09 11:52
閱讀 1890·2021-09-02 09:52
閱讀 2241·2021-08-12 13:28
閱讀 1180·2019-08-30 15:53
閱讀 505·2019-08-29 13:47
閱讀 3379·2019-08-29 11:00
閱讀 3095·2019-08-29 10:58
