AJAX的跨域問題
一·跨域
1·1：概念
同源政策是浏覽器制定的一種安全政策，所謂同源是指域名，協定，端口完全相同，隻有同源的位址才可以互相通過ajax的方式請求
同源或者不同源說的是兩個位址之間的關系，不同源位址之間得請求我們稱之為跨域請求
1·2：跨域請求的基本方式
不同源位址之間，預設是不能互相通過ajax的方式請求
思路：要是想要發送請求（必須服務端和用戶端配合才能完成）
解決：嘗試找一個可以發送跨域請求的方式
[
~.~：link，img都不可以跨域請求（可以跨域發送，但是不能接收響應回來的資料）
~.~：script（可以跨域發送，但是不能接收響應回來的資料）借助js代碼可以實作
]
1·3 JSONP的封裝
json是一種借助于script标簽發送跨域請求的技巧
通過script标簽，請求一個服務端的php檔案，這個檔案傳回的結果是一段js，作用是調用我們事先定義好的一段函數，進而将服務端想要給用戶端發過去的資料發送給用戶端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP 用戶端</title>
</head>
<body>
<script>
function jsonp (url, params, callback) {
var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)
if (typeof params === 'object') {
var tempArr = []
for (var key in params) {
var value = params[key]
tempArr.push(key + '=' + value)
}
params = tempArr.join('&')
}
var script = document.createElement('script')
script.src = url + '?' + params + '&callback=' + funcName
document.body.appendChild(script)
window[funcName] = function (data) {
callback(data)
delete window[funcName]
document.body.removeChild(script)
}
}
jsonp('http://localhost/jsonp/server.php', { id: 123 }, function (res) {
console.log(res)
})
jsonp('http://localhost/jsonp/server.php', { id: 123 }, function (res) {
console.log(res)
})
</script>
</body>
</html>
該php檔案是學習視訊的源碼，php還沒有學習
//server.php檔案
<?php
$conn = mysqli_connect('localhost', 'root', '123456', 'demo');
$query = mysqli_query($conn, 'select * from users');
while ($row = mysqli_fetch_assoc($query)) {
$data[] = $row;
}
if (empty($_GET['callback'])) {
header('Content-Type: application/json');
echo json_encode($data);
exit();
}
// 如果用戶端采用的是 script 标記對我發送的請求
// 一定要傳回一段 JavaScript
header('Content-Type: application/javascript');
$result = json_encode($data);
$callback_name = $_GET['callback'];
echo "typeof {$callback_name} === 'function' && {$callback_name}({$result})";
1·4，跨域資源共享（CORS）
<script src="jquery.js"></script>
<script>
$.get('http://localhost/cors.php', {}, function (res) {
console.log(res)
})
</script>
<?php
$conn = mysqli_connect('localhost', 'root', '123456', 'demo');
$query = mysqli_query($conn, 'select * from users');
while ($row = mysqli_fetch_assoc($query)) {
$data[] = $row;
}
// 一行代碼搞定
// 允許跨域請求
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($data);
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)