jsonp是跨域問題的一種解決方案，是一種常用的跨域手段，只支持JS腳本和JSON格式的數(shù)據(jù)本質(zhì)是利用同源策略的漏洞
一、什么是跨域？
當(dāng)一個請求url的協(xié)議、域名、端口三者之間任意一個與當(dāng)前頁面url不同即為跨域
二、引起跨域的原因
1.瀏覽器安全限制
2. 同源策略
3. XHR(XMLHttpRequest)請求
三、跨域錯誤
跨域錯誤提示
四、解決方案
1. 寫入配置文件
在nginx文件夾下的conf文件里有個nginx.conf文件，在location后面加上設(shè)置頭部的屬性，如下：
location / {
root html/dist; #打包后的dist根目錄
autoindex on; #開啟nginx目錄瀏覽功能
autoindex_exact_size off; #文件大小從KB開始顯示
charset utf-8; #顯示中文
#解決跨域問題
add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
}
配置好nginx.conf文件后需要重啟nginx服務(wù)器
2. jsonp解決
jsonp解決跨域問題
- 服務(wù)端： 將服務(wù)端返回?cái)?shù)據(jù)封裝到指定函數(shù)中返回 callback({返回?cái)?shù)據(jù)})
- 客戶端： 不管是我們的script標(biāo)簽的src還是img標(biāo)簽的src，或者說link標(biāo)簽的href他們沒有被同源策略所限制，比如我們有可能使用一個網(wǎng)絡(luò)上的圖片，就可以請求得到；所以利用同源策略漏洞，將訪問地址放在下面的標(biāo)簽的路徑中，
<script src="www.baidu.com">、< img src=""/>、<link href=""/>來解決跨域的問題
下面直接放入源碼
<body>
<!-- 1. 設(shè)置點(diǎn)擊事件 -->
<button onclick="getData()">獲取數(shù)據(jù)jsonp方式</button>
<script>
// 2. 設(shè)置點(diǎn)擊事件，參數(shù)是一格回調(diào)函數(shù)myJsonp()，myJsonp()的參數(shù)是一個對象，對象中有url地址
function getData(){
myJsonp(
{
url:"http://192.168.0.101/music/data/music_jsonp.json",
}
);
}
//3. 定義myJson()函數(shù)，創(chuàng)建script標(biāo)簽，設(shè)置src地址為請求的地址
//利用同源策略漏洞, <script src="http://192.168.0.101/music/data/music_jsonp.json">
function myJsonp(params){
const scriptEle = document.createElement("script");
//4. 回調(diào)函數(shù)，由系統(tǒng)調(diào)用，打印請求的數(shù)據(jù)結(jié)果
function callback(responseData){
console.log(responseData);
}
</script>
</body>
3. jquery中用jsonp解決
直接上源碼
注意：jsonp只支持get請求，不支持post請求
<body>
<button onclick="getData()">獲取數(shù)據(jù)jsonp方式</button>
<!-- 引入jquery -->
<script src="js/jquery-3.4.1.js"></script>
<script>
function getData(){
$.ajax({
url:"http://192.168.0.101/music/data/music_jsonp.json",
dataType: "jsonp", //返回?cái)?shù)據(jù)類型
jsonpCallback: "callback", //指定回調(diào)函數(shù)名
success: function(res){
console.log(res);
},
error:function(err){
console.log(err);
}
})
}
</script>
</body>
