CORS实现跨域
2017-11-01 本文已影响0人
Bluesbone
什么是CORS
CORS的英文全称是 Cross origin resource sharing
中文译作跨域资源共享
是一种使用Ajax跨域请求资源的方式，支持现代浏览器，核心也是规避浏览器的同源策略
与JSONP相比
- JSONP能在一些老式浏览器工作，而CORS只能在现代浏览器上工作
- JSONP利用了script的特性，CORS依然使用XMLHttpRequest
实现CORS的方式
- 使用XMLHttpRequest发送请求，浏览器在发现不符合同源策略时，会给该请求加一个请求头origin，请求头origin的值是当前网页的域名
- 后台收到请求后，可以在响应头内设置'Access-Control-Allow-Origin’
- 只要Access-Control-Allow-Origin的值和origin的值相同，即可进行Ajax跨域访问
实现代码
注意修改host文件使得不同域名映射至同一个IP地址，即可测试JSONP跨域
服务端代码
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')
// 以下是重点
response.setHeader('Access-Control-Allow-Origin','http://justfun:8080')
// 设置响应头Access-Control-Allow-Origin的值和请求头origin的值相同，即可跨域访问
// 将第二个参数设置为 '*' ，意思是不论请求头origin为何值，都可以访问这个数据
response.end(JSON.stringify(data))
// 以上是重点
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('请在浏览器地址栏输入 localhost:8080')
server.listen(8080)
HTML代码
<!doctype html>
<html lang="ch">
<head>
<meta charset="utf-8">
<title>使用CORS跨域</title>
</head>
<body>
<h1>CORS实现跨域</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>
