前端人员都懂的浏览器的同源策略,以及如何进行不同源间的相互访问

同源策略

  • 引言
  • 正文
    • 一、同源策略的定义
    • 二、同源策略的应用
    • 三、实现不同域的脚本文件访问
      • (1)通过html几个特殊的标签进行访问
      • (2)通过jsonp来实现跨域请求
      • (3)通过CORS(跨域资源共享)实现跨域请求
      • (4)通过代理实现跨域请求
  • 结束语

引言

作为前端开发人员,你要是连同源策略都不知道是什么,那就太说不过去了。本篇文章将讲述同源策略的定义, 以及当我们需要克服同源策略,如何进行跨域访问数据的方法。

  • 公众号:前端印象
  • 不定时有送书活动,记得关注~
  • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

正文

一、同源策略的定义

同源策略: 浏览器自带的一种安全策略,他是指协议域名端口 三个都相同的才能互相访问,即若协议、域名、端口有一个不相同时,浏览器禁止页面加载或执行与自身不同域的脚本。

那既然有同源的概念,那必定有不同源的概念,接下来我们来看一个组例子, 理解一下什么是同源,什么是不同源。

url 是否同源(以及原因)
http://www.example.com:80 该 url 与下列的 url 比较
http://www.example.com:80/index.html 同源(协议、域名、端口都相同)
http://www.example.com:5000 不同源(端口不同
https://www.example.com:80 不同源(协议不同
http://www.each.com:80 不同源(域名不同

为什么浏览器会有同源策略? 因为如果没有同源策略,别人就可以轻松的获取我们网站的 cookie 信息, 或是对网页进行DOM操作, 要知道这都是非常恐怖的, 尤其是 cookie 信息, 它里面存在着 sessionID ,这是与服务端的 session 会话的重要凭证, 要是被别人得到了 cookie , 可能会造成数据被盗取等后果。

二、同源策略的应用

上面了解了同源策略的定义,但是那还是挺抽象的,那我们接下来来看一下实战中的同源策略是什么样的,借此来更深刻的理解一下同源策略的定义。

我们的主体网址是: http://localhost:5000/

  • 请求与自身同域的脚本文件

我们通过jquery的 ajax 来请求 http://localhost:5000/ 下的 data.js 脚本文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    
	$.ajax({
     
	    url: 'http://localhost:5000/data.js',
	    type: 'get'
	})
	.done(data => {
     
	    console.log(data)
	})
    
</script>

</body>
</html>

因为 http://localhost:5000/data.jshttp://localhost:5000/ 是同源的,所以成功请求到了 data.js 脚本文件中的数据, 浏览器也没有报错。

  • 请求与自身不同域的脚本文件

我们通过jquery的 ajax 来请求 http://www.example.com:5000/ 下的 data.js 脚本文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    
	$.ajax({
     
	    url: 'http://www.example.com:5000/data.js',
	    type: 'get'
	})
	.done(data => {
     
	    console.log(data)
	})
    
</script>

</body>
</html>

因为 http://www.example:5000/data.jshttp://localhost:5000/ 是不同源的,所以浏览器会报出以下错误:
在这里插入图片描述
这个错误大致的意思就是说因为浏览器的同源策略,无法通过该域的网址去访问别的域下的脚本文件, 这就是浏览器同源策略起到的作用。

想必大家已经对同源策略有了一定的了解了。那么如果我们有时真的要去访问别的域下的脚本文件,但因为浏览器存在同源策略,那我们该怎么办呢?继续往下看, 看看如何解决这一问题。

三、实现不同域的脚本文件访问

实现不同域的脚本文件访问的方法有很多种,以下举几个例子:

  1. 通过html几个特殊的标签进行访问
  2. 通过jsonp来实现跨域请求
  3. 通过CORS(跨域资源共享)实现跨域请求
  4. 通过代理实现跨域请求(例如nginx 、node中间件)

(1)通过html几个特殊的标签进行访问

其实在 html 里有几个标签是存在 src 属性的,例如

你可能感兴趣的:(前端基本知识,前端,javascript,node.js,jquery,安全)