1. cors是什么
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种ajax 跨域请求资源的方式
2.cors实现方式
当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样
代码实例
服务器代码
var http = require('http')
var fs = require('fs')
var url = require('url')
var path = require('path')
http.createServer(function (req, res) {
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心"
]
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080')
//res.setHeader('Access-Control-Allow-Origin','*') 即允许任何网址访问
res.end(JSON.stringify(news))
break
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function (e, data) {
if (e) {
res.writeHead(404, 'Not Found')
res.end('<h1>404 Not Found</h1>')
} else {
res.end(data)
}
})
}
}).listen(8080)
html代码
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
<script>
$('.show').addEventListener('click', function () {
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8080/getNews', true)
xhr.send()
xhr.onload = function () {
appendHtml(JSON.parse(xhr.responseText))
}
})
function appendHtml(news) {
var html = ''
for (var i = 0; i < news.length; i++) {
html += '<li>' + news[i] + '</li>'
}
$('.news').innerHTML = html
}
function $(selector) {
return document.querySelector(selector)
}
</script>
</body>
</html>
