跨域指的是Javascript通過XMLHttpRequest請求數據時，調用JavaScript的頁面所在的域和被請求頁面的域不止。對於網站來說，瀏覽器處於安全考慮是不允許跨域的。另外，當域相同但端口或者協議不同時，瀏覽器也是禁止的。比如：
| URL | 說明 | 允許請求 |
|---|---|---|
| http://a.test.com/ http://a.test.com/info | 同域下以及不同目錄 | 允許 |
| http://a.test.com/ http://a.test.com:9090 | 同域下不同端口 | 不允許 |
| http://a.test.com https://a.test.com | 端口 不同 | 不允許 |
| http://a.test.com http://b.test.com | 不同的子域 | 不允許 |
所以允許的情況只有： 協議://域名:端口, 全部相同才可以。
如果這個規則限制了Chrome擴展，那就會使其能力大打折扣。所以谷歌允許擴展不必受限於跨域限制。但是，處於安全考慮，需要在manifest.json文件中的permissions屬性中聲明需要跨域的權限，也就是你聲明你想訪問的域名。
同樣的，這次我們也寫個簡單的小栗子，點擊擴展后，顯示當前位置今天的天氣。
我們來使用高德開發平台的API，注冊應用后，可免費使用。結合IP定位 和 天氣查詢 兩個API來完成我們的功能，現根據IP定位獲取城市編碼，再使用天氣查詢來查詢當前的天氣情況。
首先來看下，manifest.json
{
"manifest_version": 2,
"name": "查詢天氣",
"version": "1.0",
"description": "查詢天氣",
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "查詢天氣",
"default_popup": "popup.html"
},
"permissions": [
"https://restapi.amap.com/*"
]
}
其中，我們指定了可以訪問的域名： https://restapi.amap.com/*，同時呢，我們指明了彈出的界面。
接下來看看，界面編碼,
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 400px;
height: 100px;
}
div {
line-height: 100px;
font-size: 42px;
text-align: center;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="weather_div">正在查詢……</div>
<script src="js/jquery.min.js"></script>
<script src="js/weather.js"></script>
</body>
</html>
我們簡單的定義了DIV來存放內容，並引入了JQuery和自定義腳本 weather.js.
weath.js
content = $('#weather_div')
$.get('https://restapi.amap.com/v3/ip',{key: 'your key'}, function(geo_data){
if(!geo_data || geo_data.status != "1"){
content.text('查詢地址出錯:' + geo_data.info);
return;
}
console.log(geo_data)
$.get('https://restapi.amap.com/v3/weather/weatherInfo', {city: geo_data.adcode, key: 'your key'},
function(weather_data){
console.log(weather_data)
if(!weather_data || weather_data.status != '1'){
content.text('查詢天氣出錯: ' + weather_data.info)
return;
}
var live = weather_data.lives[0]
content.html('省:' + live.province + ', 市:' + live.city + '<br/>' +
'天氣:' + live.weather + ',溫度: '+ live.temperature + ' 攝氏度' + '<br/>' +
'風力: ' + live.windpower + ',方向: ' + live.winddirection + '<br/>' +
'更新時間:' + live.reporttime);
}, 'json')
},'json')
至此，就完成了！看下效果吧！
哈哈，界面稍微有些丑，不過功能我們是已經實現了！是不是很easy! 趕緊自己動手來試試吧！
歡迎關注我的公眾號： 張恆強的學習筆記
