前端跨域小结

最新推荐文章于 2022-07-02 16:35:59 发布

码农三少_V

最新推荐文章于 2022-07-02 16:35:59 发布

阅读量111

点赞数

分类专栏：面试

本文链接：https://blog.csdn.net/qq_40258091/article/details/100888208

版权

面试专栏收录该内容

53 篇文章 0 订阅

订阅专栏

零、本期内容

1、啥是跨域（同源策略【协议、域名非IP、端口只要有一个不一样就不是同源了！】、跨域相关的基础性知识）
2、解决跨域的9种方法（JSONP、CORS、其他7种）

一、啥是跨域

1、说到跨域，我们就不得不提一下浏览器中的同源策略。

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

！！意义！！：同源策略较大程度保证了“前端的安全性”，但是在一些工作中，我们需要突破同源策略的限制，这就是所谓的跨域！！

2、一个域名的组成。（abc.com好像就做根域名，还有二级域名的存在！！）

3、存在跨域的情况（域名和域名对应IP也算跨域，注意主、子、二级域名这些坑）

4、同源策略所限制的东西

非同源的网站之间

无法共享 cookie, localStorage, indexDB
无法操作彼此的 dom 元素
无法发送 ajax 请求
无法通过 flash 发送 http 请求
其他

二、解决跨域的几种方法

1、JSONP（兼容性好；不过仅支持GET方法，不安全可能会遭受XSS攻击。）

1.1、原理

【script、img（图像Ping，单向的）、link三个标签是不受同源策略限制的。这里利用 script.src 属性实现跨域。】

首先是利用script标签的src属性来实现跨域。
通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
由于使用script标签的src属性，因此只支持get方法

1.2、相关代码实现

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function hello(data) {
          console.log(data);
        }
    </script>
    <script src="http://www.520cyb.cn/interview/jsonp.php?callback=hello&keyword=从前端传过来的值"></script>
</head>
<body>

</body>
</html>

PHP后端代码(前端中的JS通过 script.src 属性，url 里面的查询参数如 callback=hello&keyword='前端传值' 这样，将 “回调函数、参数传给后端，后端处理后 echo输出、前端再执行回调函数 echo $callback.'('. json_encode($arr). ')') ：

输出了想要的结果

2、CORS（虽然使用目的跟 JSONP你很类似，但是 CORS 更强大。CORS支持所有的 HTTP请求方法【分为简单和复杂请求】，只需后端去设置 Header，然后前端就可以“直接使用”。 JSONP仅支持 GET，而且易遭受 XSS攻击。）

2.1、原理

只需要向响应头header中注入Access-Control-Allow-Origin（如PHP中的 header('Access-Control-Allow-Origin: *');） ，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了。

2.2、实现

后端如PHP。在相应的 php 文件前面加上一行代码即可 ==> header('Access-Control-Allow-Origin: *');

3、其他的7种跨域方式（感觉不太常用，就简写了）

3.1、iframe系列： iframe+[document.domain|location.hash|window.name]

3.2、postMessage(H5中新增的。otherWindow.postMessage(message, targetOrigin, [transfer]);)

3.3、websocket（双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。）

3.4、Node中间件代理（2次跨域。服务器向服务器请求就无需遵循同源策略）

3.5、nginx反向代理（实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。）

码农三少_V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端跨域小结

零、本期内容1、啥是跨域（同源策略【协议、域名非IP、端口只要有一个不一样就不是同源了！】、跨域相关的基础性知识）2、解决跨域的9种方法（JSONP、CORS、其他7种）一、啥是跨域1、说到跨域，我们就不得不提一下浏览器中的同源策略。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域...
复制链接

扫一扫

专栏目录