- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- Ajax解決跨域之設置CORS響應頭實(shí)現跨域案例詳解
跨源資源共享（CORS）
CORS（Cross-Origin Resource Sharing），跨域資源共享。CORS 是官方的跨域解決方 案，它的特點(diǎn)是不需要在客戶(hù)端做任何特殊的操作，完全在服務(wù)器中進(jìn)行處理，支持 get 和 post 請求?？缬蛸Y源共享標準新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些 源站通過(guò)瀏覽器有權限訪(fǎng)問(wèn)哪些資源
CORS 是通過(guò)設置一個(gè)響應頭來(lái)告訴瀏覽器，該請求允許跨域，瀏覽器收到該響應 以后就會(huì )對響應放行。
ajaxDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORS</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>發(fā)送請求</button>
<div id="result"></div>
<script>
const btn = document.querySelector('button');
btn.onclick = function () {
//1. 創(chuàng )建對象
const x = new XMLHttpRequest();
//2. 初始化設置
x.open("GET", "http://127.0.0.1:8080/cors-server");
//3. 發(fā)送
x.send();
//4. 綁定事件
x.onreadystatechange = function () {
if (x.readyState === 4) {
if (x.status >= 200 && x.status < 300) {
document.getElementById('result').innerText = x.response;
}
}
}
}
</script>
</body>
</html>
server.js
//1. 引入express
const express = require('express');
//2. 創(chuàng )建應用對象
const app = express();
//3. 創(chuàng )建路由規則
// request 是對請求報文的封裝
// response 是對響應報文的封裝
app.all('/cors-server', (request, response)=>{
//設置響應頭
response.setHeader("Access-Control-Allow-Origin", "*");// 允許請求所有跨域 *
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 允許指定請求跨域
// response.setHeader("Access-Control-Allow-Headers", '*');// 允許自定義請求頭標簽
// response.setHeader("Access-Control-Allow-Method", '*');// 允許所有的請求跨域 *
// response.setHeader("Access-Control-Allow-Method", 'get');// 允許get請求跨域
response.send('hello CORS');
});
//4. 監聽(tīng)端口啟動(dòng)服務(wù)
app.listen(8080, () => {
console.log("服務(wù)已經(jīng)啟動(dòng), 8080 端口監聽(tīng)中....");
});
啟動(dòng)服務(wù) nodemon server.js
運行結果：
到此這篇關(guān)于A(yíng)jax解決跨域之設置CORS響應頭實(shí)現跨域案例詳解的文章就介紹到這了,更多相關(guān)Ajax解決跨域內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
