首先,为了演示各种http请求之间的差异,我们这里使用nodejs创建一个简单的http服务,通过下边几行简单的代码:
var http = require('http')
var server = http.createServer(function(res,req){
console.log('requert come',res.url)
req.end('123')
}).listen(8887)
console.log('server listening on 8887')
一、http客户端(能发送http请求并获取相应数据的客户端):
1、最常见的http客户端——各种浏览器
2、crul命令工具(如下图)
这个就是在gitbash命令行中输入
crul -v baidu.com
返回了要求重定向的一个html页面。
二、cros跨域:
为了更加深入的理解这个问题:我们创建了两个服务文件
server1.js 这里读取一个test.html并发送到客户端默认监听8888端口,在html中我们发送了一个端口为8887端口的请求,看看会发生什么:
var http = require('http')
var fs = require('fs')
var server = http.createServer(function(res,req){
console.log('requert come',res.url)
var html = fs.readFileSync('text.html','utf-8')
console.log(fs)
console.log(html)
req.writeHead(200,{
'Content-Type': 'text/html'
})
req.end(html)
})
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aaa </title>
</head>
<body>
<p>asasasa</p>
</body>
<script type="text/javascript">
var xhr = new XMLHttpRequest()
xhr.open('GET','http://127.0.0.1:8887/')
xhr.send()
</script>
</html>
server2.js
var http = require('http')
var server = http.createServer(function(res,req){
console.log('requert come',res.url)
req.end('123')
req.writeHead(200,{
'Access-Control-Origin': ''
})
}).listen(8887)
console.log('server listening on 8887')
启动两个服务后,打开浏览器:
提示我们没有设置Access-Control-Allow-Origin
但是我们的服务器依然可以收到本次的request,之后我们在修改一下server2.js
var http = require('http')
var server = http.createServer(function(res,req){
console.log('requert come',res.url)
req.writeHead(200,{
'Access-Control-Allow-Origin': '*'
})
req.end('123')
}).listen(8887)
console.log('server listening on 8887')
重新启动,就一切正常了:
1.什么是跨域:通过以上的测试:大家都应该能感受到:浏览器对于不在同域的ajax,会默认拦截。我们需要在服务端设置允许那些ip可以访问我们这个服务。
2 解决跨域
第一种方式是就是在服务端设置'Access-Control-Allow-Origin': '*' 这是最本质的解决浏览器的方案。设置为*可能会不安全,我们也可以改为指定的域名。
第二种通过jsonp:什么是jsonp呢:
我们把server2.js
req.writeHead(200,{
'Access-Control-Allow-Origin': '*'
})
这一段去掉在text.html修改为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aaa </title>
</head>
<body>
<p>asasasa</p>
</body>
<!-- <script type="text/javascript">
var xhr = new XMLHttpRequest()
xhr.open('GET','http://127.0.0.1:8887/')
xhr.send()
</script> -->
<script type="text/javascript" src="http://127.0.0.1:8887/">
</script>
</html>
重新启动:
我们发现这个请求也是可以成功的请求到:这是为什么呢??原因是浏览器在默认这个情况下对于src url link 这些标签或者属性是没有限制的。基于这个特性,我们可以在服务端返回的内容里嵌入一段可执行的代码,来实现跨域的操作。
第三种就是通过浏览器插件来解决:我们在google商店里边搜索cros,可以搜到很多插件,这些插件本质上会拦截所有的请求,并且自动限制请求头。