跨域请求之cors

作者 likaiqiang 日期 2019-04-20
跨域请求之cors

什么是cors

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。

cors的作用

cors需要浏览器与服务器同时支持

浏览器兼容性

浏览器给服务器发送请求,在该请求的响应头里面,如果浏览器没有发现”Access-Control-Allow-Origin”或者”Access-Control-Allow-Origin”的值表示不允许,那么浏览器就会拦截该请求,并抛出一个错误

表示服务器不允许该网站访问

用node模拟cors请求

用nodejs监听两个端口8888与8887,8888向8887发送ajax请求

server1.js

const http = require('http')

const fs = require('fs')

http.createServer(function(req,res){
const html = fs.readFileSync('./test.html')
res.writeHead(200,{
'Content-Type':'text/html'
})
res.end(html)
}).listen(8888)

console.log('server listen 8888')

server2.js

const http = require('http')

http.createServer(function(req,res){
res.end('234')
}).listen(8887)

console.log('server listen 8887')

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
</head>
<body>
<div>
hello world
<button id="btn">click me</button>
<script>
var btn = document.getElementById('btn')
btn.addEventListener('click',()=>{
var xhr = new XMLHttpRequest()
xhr.open('get','http://127.0.0.1:8887')
xhr.send()
})
</script>
</div>
</body>
</html>

首先访问http://127.0.0.1:8888

点击click me

浏览器报错并且该请求的response header 里面没有”Access-Control-Allow-Origin”。那么我们改一下server2.js

const http = require('http')

http.createServer(function(req,res){
res.writeHead(200,{
"Access-Control-Allow-Origin":"*"
})
res.end('234')
}).listen(8887)

console.log('server listen 8887')

重新请求

浏览器没有报错,并且该条请求的response header 里面有 “Access-Control-Allow-Origin”:”*”表示 http://127.0.0.1:8887 这个服务器允许所有网站访问

服务器允许所有网站访问实际上是不可取的,实际应用中,我们可以通过request header 的orgin判断是否是合法的请求,来动态返回”Access-Control-Allow-Origin”

const http = require('http')
const valid = ['http://localhost:8888']
http.createServer(function(req,res){
if(valid.indexOf(req.headers.origin)!==-1)
res.writeHead(200,{
"Access-Control-Allow-Origin":"*"
})
res.end('234')
}).listen(8887)

console.log('server listen 8887')