什么是CORS

CORS的英文全称是 Cross origin resource sharing
中文译作跨域资源共享
是一种使用Ajax跨域请求资源的方式，支持现代浏览器，核心也是规避浏览器的同源策略

与JSONP相比

• JSONP能在一些老式浏览器工作，而CORS只能在现代浏览器上工作
• JSONP利用了script的特性，CORS依然使用XMLHttpRequest

实现CORS的方式

1. 使用XMLHttpRequest发送请求，浏览器在发现不符合同源策略时，会给该请求加一个请求头origin，请求头origin的值是当前网页的域名
2. 后台收到请求后，可以在响应头内设置'Access-Control-Allow-Origin’
3. 只要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>

代码GitHub地址

前端