使用阿里雲對象存儲oos遇到跨域訪問的問題

使用阿里雲對象存儲oos遇到跨域訪問的問題,因爲第一次使用雲存儲,初級碼渣查了好久文檔,終於找到了解決方法.

大概就說了這麼多,我的操作是來到oos概覽一欄 ,找到跨域訪問

做了一個最簡單的配置,這樣相對來說是不安全的,可以按所需設置更多

最近做了一個小項目練習,也遇到了很多跨域的問題,找了一份總結.

什麼是跨域？
瀏覽器從一個域名的網頁去請求另一個域名的資源時，域名、端口、協議任一不同，都是跨域
域名：
　主域名不同 http://www.baidu.com/index.html -->http://www.sina.com/test.js
　子域名不同 http://www.666.baidu.com/index.html -->http://www.555.baidu.com/test.js
　域名和域名ip http://www.baidu.com/index.html -->http://180.149.132.47/test.js
端口：
　http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js
協議：
　http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js
備註：
　1、端口和協議的不同，只能通過後臺來解決
　2、localhost和127.0.0.1雖然都指向本機，但也屬於跨域
　
如何解決跨域問題？
跨域實踐： Fiddle 處理前端本地開發跨域問題
1、jsonp跨域
JSONP（JSON with Padding：填充式JSON)，應用JSON的一種新方法，
JSON、JSONP的區別：
　1、JSON返回的是一串數據、JSONP返回的是腳本代碼(包含一個函數調用)
　2、JSONP 只支持get請求、不支持post請求
　(類似往頁面添加一個script標籤，通過src屬性去觸發對指定地址的請求,故只能是Get請求)

2、nginx反向代理：
　　www.baidu.com/index.html需要調用www.sina.com/server.php，可以寫一個接口www.baidu.com/server.php，由這個接口在後端去調用www.sina.com/server.php並拿到返回值，然後再返回給index.html
　　
3、PHP端修改header
　　header(‘Access-Control-Allow-Origin:*’);//允許所有來源訪問
　　header(‘Access-Control-Allow-Method:POST,GET’);//允許訪問的方式
　　
４、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對象的，但卻無法獲取相應的屬性和方法。比如，有一個頁面，它的地址是http://www.example.com/a.html ， 在這個頁面裏面有一個iframe，它的src是http://example.com/b.html, 很顯然，這個頁面與它裏面的iframe框架是不同域的，所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的

５、window.name
關鍵點：window.name在頁面的生命週期裏共享一個window.name;
兼容性：所有瀏覽器都支持；
優點：
　最簡單的利用了瀏覽器的特性來做到不同域之間的數據傳遞；
　不需要前端和後端的特殊配製；
缺點：
　大小限制：window.name最大size是2M左右，不同瀏覽器中會有不同約定；
　安全性：當前頁面所有window都可以修改，很不安全；
　數據類型：傳遞數據只能限於字符串，如果是對象或者其他會自動被轉化爲字符串

６、postMessage 關鍵點： 　postMessage是h5引入的一個新概念，現在也在進一步的推廣和發展中，他進行了一系列的封裝，我們可以通過window.postMessage的方式進行使用，並可以監聽其發送的消息； 兼容性：移動端可以放心用，但是pc端需要做降級處理 優點 　不需要後端介入就可以做到跨域，一個函數外加兩個參數（請求url，發送數據）就可以搞定； 　移動端兼容性好； 缺點 　無法做到一對一的傳遞方式：監聽中需要做很多消息的識別，由於postMessage發出的消息對於同一個頁面的不同功能相當於一個廣播的過程，該頁面的所有onmessage都會收到，所以需要做消息的判斷； 安全性問題：三方可以通過截獲，注入html或者腳本的形式監聽到消息，從而能夠做到篡改的效果，所以在postMessage和onmessage中一定要做好這方面的限制； 　發送的數據會通過結構化克隆算法進行序列化，所以只有滿足該算法要求的參數才能夠被解析，否則會報錯，如function就不能當作參數進行傳遞； 使用方式：通信的函數，sendMessage負責發送消息，bindEvent負責消息的監聽並處理