http 协议那些事 二 中级篇

作者:神秘网友 发布时间:2020-09-09 13:05:29

http 协议那些事 二 中级篇

http 协议那些事 二 中级篇

首先,为了演示各种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命令工具(如下图)

http 协议那些事 二 中级篇

这个就是在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')

启动两个服务后,打开浏览器:

http 协议那些事 二 中级篇

提示我们没有设置Access-Control-Allow-Origin

http 协议那些事 二 中级篇

但是我们的服务器依然可以收到本次的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')

重新启动,就一切正常了:

http 协议那些事 二 中级篇

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>

重新启动:

http 协议那些事 二 中级篇

我们发现这个请求也是可以成功的请求到:这是为什么呢??原因是浏览器在默认这个情况下对于src  url   link 这些标签或者属性是没有限制的。基于这个特性,我们可以在服务端返回的内容里嵌入一段可执行的代码,来实现跨域的操作。

第三种就是通过浏览器插件来解决:我们在google商店里边搜索cros,可以搜到很多插件,这些插件本质上会拦截所有的请求,并且自动限制请求头。

http 协议那些事 二 中级篇

 

 

http 协议那些事 二 中级篇相关教程

  1. Mysql安装
  2. Android Studio没有自带HttpClinet类库的解决办法
  3. 解读OkHttp3实现原理与设计思想
  4. 3.服务器端接入文档
  5. 关于站内搜索的那些事儿
  6. Android OkHttp(一)源码出发探寻执行原理
  7. 使用ajax或XMLHttpRequest实现文件上传
  8. 通过http-WebClient、HttpClient调用其它服务接口,区别,提供两