一、首先添加一个html:
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8887/')
xhr.send()
</script>
</html>
二、然后启动两个服务
server.js:
const http = require('http')
const fs = require('fs')
http.createServer(function(request, response) {
console.log('request come', request.url)
const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(200, {
'Content-Type': 'text/html'
})
response.end(html)
}).listen(8888)
console.log('server listening on 8888')
server2.js:
const http = require('http')
http.createServer(function(request, response) {
console.log('request come', request.url)
response.end('123')
}).listen(8887)
console.log('server listening on 8887')
三、打开浏览器出入localhost:8888,然后会出现如下错误:显示没有设置Access-Control-Allow-Origin的头部
虽然有报错,但是请求已经发送,信息也已经返回,但是浏览器在解析这个返回内容后,发现是不允许的,然后报错。这是浏览器同域的限制。
四、我们在server2.js设置一下上述未设置的头部,然后刷新浏览器,没有再报错。
const http = require('http')
http.createServer(function(request, response) {
console.log('request come', request.url)
response.writeHead(200, {
'Access-Control-Allow-Origin': '*' //*代表任何域名都可以访问这个服务
})
response.end('123')
}).listen(8887)
console.log('server listening on 8887')
然后去浏览的network查看会显示如下:
五、jsonp解决跨域。
我们修改test.html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script src="http://127.0.0.1:8887/"></script>
</html>
修改server2.js如下:
const http = require('http')
http.createServer(function(request, response) {
console.log('request come', request.url)
response.end('123')
}).listen(8887)
console.log('server listening on 8887')
此时重启服务去浏览器刷新,不会再报错,原因是浏览器允许img、script、link等标签在标签写路径内容,进行请求时,是允许跨域的。JSONP实现原理其实就在script标签里面加载了一个链接,这个链接去访问了服务器的内容,并且返回了响应的数据。
六、Access-Control-Allow-Origin头部的安全设置。
设置为*,是不安全的,这样任何域名都可以访问,我们该如何设置呢?
- 可以设置为特定的域名,例如
'Access-Control-Allow-Origin': 'localhost:8888'
- 动态的判断,通过获取到的request.url进行判断