什么是CORS
CORS的英文全稱(chēng)是 Cross origin resource sharing
中文譯作跨域資源共享
是一種使用Ajax跨域請(qǐng)求資源的方式蒸甜，支持現(xiàn)代瀏覽器鹃骂，核心也是規(guī)避瀏覽器的同源策略
與JSONP相比
- JSONP能在一些老式瀏覽器工作葫掉，而CORS只能在現(xiàn)代瀏覽器上工作
- JSONP利用了script的特性誊锭，CORS依然使用XMLHttpRequest
實(shí)現(xiàn)CORS的方式
- 使用XMLHttpRequest發(fā)送請(qǐng)求撩独，瀏覽器在發(fā)現(xiàn)不符合同源策略時(shí)比伏，會(huì)給該請(qǐng)求加一個(gè)請(qǐng)求頭origin胜卤，請(qǐng)求頭origin的值是當(dāng)前網(wǎng)頁(yè)的域名
- 后臺(tái)收到請(qǐng)求后，可以在響應(yīng)頭內(nèi)設(shè)置'Access-Control-Allow-Origin’
- 只要Access-Control-Allow-Origin的值和origin的值相同赁项，即可進(jìn)行Ajax跨域訪問(wèn)
實(shí)現(xiàn)代碼
注意修改host文件使得不同域名映射至同一個(gè)IP地址葛躏，即可測(cè)試JSONP跨域
服務(wù)端代碼
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
var server = http.createServer(function (request, response) {
var pathObj = url.parse(request.url, true)
console.log(pathObj)
switch (pathObj.pathname) {
case '/getdata':
var data = {"name": "bluesbonewong", "age": 16}
response.setHeader('content-type', 'text/json;charset=utf-8')
// 以下是重點(diǎn)
response.setHeader('Access-Control-Allow-Origin','http://justfun:8080')
// 設(shè)置響應(yīng)頭Access-Control-Allow-Origin的值和請(qǐng)求頭origin的值相同，即可跨域訪問(wèn)
// 將第二個(gè)參數(shù)設(shè)置為 '*' 悠菜，意思是不論請(qǐng)求頭origin為何值舰攒，都可以訪問(wèn)這個(gè)數(shù)據(jù)
response.end(JSON.stringify(data))
// 以上是重點(diǎn)
break
// 以下不用看
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function (error, data) {
if (error) {
response.writeHead(404, 'not found')
response.end('<h1>not found</h1>')
} else {
response.end(data)
}
})
}
})
console.log('請(qǐng)?jiān)跒g覽器地址欄輸入 localhost:8080')
server.listen(8080)
HTML代碼
<!doctype html>
<html lang="ch">
<head>
<meta charset="utf-8">
<title>使用CORS跨域</title>
</head>
<body>
<h1>CORS實(shí)現(xiàn)跨域</h1>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET','http://127.0.0.1:8080/getdata',true)
xhr.addEventListener('readystatechange',function () {
console.log(xhr.responseText)
})
xhr.send()
</script>
</body>
</html>
