什么是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')
|
