http 协议那些事二中级篇

最新推荐文章于 2023-05-23 15:36:50 发布

小恒同学

最新推荐文章于 2023-05-23 15:36:50 发布

阅读量158

点赞数 1

本文链接：https://blog.csdn.net/weixin_41686779/article/details/90737982

版权

首先，为了演示各种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，可以搜到很多插件，这些插件本质上会拦截所有的请求，并且自动限制请求头。

小恒同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
http 协议那些事二中级篇

首先，为了演示各种http请求之间的差异，我们这里使用nodejs创建一个简单的http服务，通过下边几行简单的代码： var http = require('http')var server = http.createServer(function(res,req){ console.log('requert come',res.url) req.end('123')})....
复制链接

扫一扫