1. 程式人生 > >同源策略與跨域解決方案

同源策略與跨域解決方案

本文將介紹兩種重要的ajax跨域解決方案(jsonp、CORS),在網上看了這麼多有關同源策略的介紹,感覺都說得不是很清楚,都只是提到了一部分,站在巨人的肩膀上我簡單總結所謂的 “同源策略”

同源策略: 就是為了保證資料安全的一個實現方法,不允許跨域訪問數。

       本質:在發起http請求的時候瀏覽器並沒有做任何的同源策略限制(只是跨域請求頭部不會帶當前cookie),也就是它能向任何域發起http請求,瀏覽器是在後臺返回資料的時候做的同源策略限制,它會先判斷請求的域和當前域是否是同一個域一下。如果不是同一域名、協議、埠就存在跨域問題。有同源策略的限制。而在script、img、iframe中瀏覽器沒有對其做限制。

1、JSONP 

script實現跨域,src 後面跟url地址,如 src=“http://localhost:8080/FirstTest/index.html?callBack=log”,伺服器返回的是log(argument)方法(js文字),並立即呼叫執行;相當於載入了一個js檔案,而檔案裡面就是呼叫log方法,引數就是argument。

可以通過設定 response.setHeader("Access-Control-Allow-Origin", "http://localhost:8090"); 來控制信任的源,  第二個引數表示可訪問的源,在這個域下都可以請求訪問資料,不受瀏覽器同源策略的影響。' * ' 表示所有域都為可信任,都可以訪問(很少這樣使用)。

8080埠訪問8090埠並返回資料


request url表示請求的地址 8090埠,request headers Origin 表示request的域、源,response hearders 中的access control allow origin 表示可信任的源。當request url與request headers Origin 中的域不一樣時就存在跨域訪問,之所以再此不存在跨域問題是因為response hearders 中我添加了可訪問源為8080埠,

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");