同源策略下,服务器会收到浏览器的请求吗?

简介: 同源策略下,服务器会收到浏览器的请求吗?

开文大吉


各位读者,小嘟又和大家见面啦。每次写文章的时候就很开心,因为写文章可以和读者说好多的话,一想到自己写的文章可能会帮助他人,本嘟就很开心。

若读者您觉得本文对你有所帮助(有一点也算有哦,不能耍赖,嘿嘿嘿),还烦请读者给小嘟点赞评论收藏来一波,要是能关注那更加好勒,哈哈哈

你们的鼓励是我持续写下去的动力!

有什么问题,都可以给小嘟指出来,大家一起学习!

闲聊结束,进入正题...

主题(Topic)


  • 小嘟给大家带来的是这样的问题同源策略下,服务器会收到浏览器的请求吗?
  • 小嘟叨叨时刻:这个问题还是有必要深究的,如果你急切的想要知道答案,那小嘟就直接告诉你好啦!答案就是:会服务器会收到浏览器的请求,如果想要验证一下,那么就和小嘟一起往下看吧!


问答环节1

  • 小囔小嘟的好朋友哦,今天它来找小嘟写作业。
  • 小囔(这个字来自嘟囔):小嘟,我有个问题,什么是同源策略?这个有什么用呢?
  • 小嘟:首先来看看百度百科给的解释


百科感悟

  • 从上边我们可以知道
  • (1)、浏览器是对同源策略的一种实现,同源策略是一个规范,也可以理解成理论,而浏览器就是这个理论的实践者
  • 它是一个安全策略
  • (3)、它的作用就是限制该源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档减少可能被攻击的媒介

问答环节2

小囔:我知道什么是同源策略啦,它可以保护每一个源不被别的人恶意攻击,提高了这个源的安全性。

小嘟:嗯嗯,理解的差不多。

小囔:对了,小嘟,我知道什么是同源策略了,但浏览器是怎样判断同源呢?这个你再讲讲呗!

小嘟:好的!没问题,那么什么是同源呢?如果两个url 的协议、域名(也可以是ip)、端口都相同的话,那么它们就被认为是同源,反之,则不是同源

  • MDN上的解释
  • 阮一峰博客中的解释


举个例子

(1)协议不同

http://juejin.cn:80

https://juejin.cn:80

它们两个就不是同源,因为它们的协议不一样(一个为http,一个为https)

(2)ip不同

http://192.168.0.1:80

http://192.168.0.2:80

综上所述,所以这里我觉得用ip来说比较更准确一点。它们两个就不是同源,因为它们的ip不一样

  • ip与域名的关系
  • (3)、端口不同


  • :如果没有写端口,那么就是该协议对应的默认端口,比如http默认端口为80,http默认端口为443

问答环节3

  • 小囔:这下俺彻底悟了,小嘟你太厉害了,我要点赞评论收藏关注你。
  • 小嘟:嘿嘿嘿,谢谢小囔,懂了就好,但是只会理论可不行哦,我们不仅要懂理论,而且我们还是要实践的,因为伟人曾经说过一句:实践是检验真理的唯一标准哈哈哈,我可真顽皮. 那我们上例子吧!


真理时刻

  • 验证的真理课题:在实际应用场景中,服务器到底会不会收到浏览器的请求呢
  • 实践方法: 前端使用react搭建,并在里边使用axios发送一个get请求,后端起了一个node服务器。

1.先启动react


  • local:就是可以在自己的本机上使用的网址。
  • On Your Network :可以在其他设备上使用(当然还包括本机哦),但这里有个注意点,你没有把它放到服务器的话,那么只能在局域网下访问。我认为,如果你把它放在互联网上,那么任何能上网的设备都应该可以访问了 。


.发送get请求,axios请求核心

  • 第一种写法


  • 第二种写法
  • 3.node.js模块
  • 开了两个get请求接口,如下所示,开放的端口为8888
let express = require('express');
let app = express();
app.get('/',(req,res)=>{
       res.send("123");
})
app.get('/sameOrig',(req,res)=>{
       console.log("我是node服务器,我收到了浏览器发的请求!");
       res.send('welcome node!!!');
})
app.listen(8888,()=>{
       console.log("server is running...");
})



  • 我们发一个请求试试


    可以看出浏览器报错了,看它报错的原因请求被同源策略阻止了
  • 我们这个时候再来看看node服务器收到请求了吗?

可以看出,此时服务器收到了我们发出的请求,那我们在试试第二种请求方式

  • 第二种请求方式试试


    还是一样的问题
  • 再来看看服务器的情况

此时服务器打印了两行数据,说明我们发的两次请求服务器都收到了

到此我们可以得出结果在同源策略下,服务器可以收到浏览器发来的请求


官方的说法:同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。


到此,小嘟叨叨时刻结束,能看到这里的读者,小嘟相信你已经掌握的差不多了,本文有两千多字呢,读完还蛮累的(嘿嘿嘿)。

收文大吉


小嘟现在还在上学,所以只能抽空来写文章。

每写一篇文章都要用几天的时间来琢磨,改格式,该错别字,就这样增、删 不断的重复。

感觉写一篇文章好累呀,哈哈哈!太费时间了,搞得小嘟都想水啦!

希望各位读者,若觉得对你有所帮助,欢迎点赞评论收藏一下下,小嘟太需要鼓励啦!

周末啦,预祝各位读者周末快乐!!!(小嘟还得补作业,呜呜呜)

溜啦溜啦小嘟要和小囔补作业去啦...

相关文章
|
5天前
|
运维 Prometheus 监控
如何在测试环境中保持操作系统、浏览器版本和服务器配置的稳定性和一致性?
如何在测试环境中保持操作系统、浏览器版本和服务器配置的稳定性和一致性?
|
3月前
|
Swift iOS开发
iOS Swift使用Alamofire请求本地服务器报错-1002
iOS Swift使用Alamofire请求本地服务器报错-1002
95 1
|
3月前
|
开发框架 缓存 .NET
并发请求太多,服务器崩溃了?试试使用 ASP.NET Core Web API 操作筛选器对请求进行限流
并发请求太多,服务器崩溃了?试试使用 ASP.NET Core Web API 操作筛选器对请求进行限流
208 0
|
28天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
56 22
|
28天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
53 4
|
1月前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
53 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
2月前
|
JSON 前端开发 JavaScript
java中post请求调用下载文件接口浏览器未弹窗而是返回一堆json,为啥
客户端调接口需要返回另存为弹窗,下载文件,但是遇到的问题是接口调用成功且不报错,浏览器F12查看居然返回一堆json,而没有另存为弹窗; > 正确的效果应该是:接口调用成功且浏览器F12不返回任何json,而是弹窗另存为窗口,直接保存文件即可。
141 2
|
2月前
|
开发者
HTTP状态码是由网页服务器返回的三位数字响应代码,用于表示请求的处理结果和状态
HTTP状态码是由网页服务器返回的三位数字响应代码,用于表示请求的处理结果和状态
31 1
|
3月前
|
缓存 数据安全/隐私保护 UED
代理服务器在HTTP请求中的应用:Ruby实例
代理服务器在HTTP请求中的应用:Ruby实例
|
3月前
|
网络安全 数据安全/隐私保护 iOS开发
【Mac os】如何在服务器上启动Jupyter notebook并在本地浏览器Web端环境编辑程序
本文介绍了如何在服务器上启动Jupyter Notebook并通过SSH隧道在本地浏览器中访问和编辑程序的详细步骤,包括服务器端Jupyter的启动命令、本地终端的SSH隧道建立方法以及在浏览器中访问Jupyter Notebook的流程。
138 0