个人总结：浅谈浏览器跨域及解决办法？

最新推荐文章于 2024-03-02 15:25:23 发布

前端小帅

最新推荐文章于 2024-03-02 15:25:23 发布

阅读量416

点赞数

分类专栏：面试题文章标签： chrome

本文链接：https://blog.csdn.net/zhuxiaoshuai886/article/details/106340476

版权

本文介绍了浏览器的同源策略，详细阐述了跨域的概念，以及为何需要跨域。同时，详细探讨了解决跨域的各种方法，包括CORS、Node正向代理、Nginx反向代理、JSONP、Websocket、window.postMessage、document.domain + Iframe、window.location.hash + Iframe和window.name + Iframe，并提供了相关示例。

摘要由CSDN通过智能技术生成

一、什么是跨域？

同源策略

同源策略：是一个重要的安全策略，它用于限制一个origin的文档，或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源示例

那么如何才算是同源呢？先来看看 url 的组成部分？

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
在这里插入图片描述
只有当【protocol（协议），domain（域名），port（端口）】三者一致，才是同源。

正确示例：
http://www.example.com:80/a.js
http://www.example.com:80/b.js
属于协议、域名、端口一致。

错误示例：
http://www.example.com:8080
http://www.example.com:80
没有三者一致。

二、如何解决跨域？

1.CORS

CORS(跨域资源共享):是一种机制，它使用额外的http头来告诉浏览器，让运行在（domain）上的web可以被允许访问不同资源服务器上的指定资源。
在cors中会有简单请求和非简单请求。

简单请求
不会触发cors预检请求，这样的请求为“简单请求”，

情况一：使用以下方法请求： GET、POST、HEAD
情况二：人为设置以下集合外的请求头：Accept、Accept-Language、Content-Language、Content-Type、DPR。
情况三：Content-type的值仅限：text/plain、multipart/form-data、application/x-www-form-urlencoded。
情况四：请求中的任意XMLHttpRequestUpload对象均没有注册任何事件监听器
请求中没有使用ReadableStream对象。

非简单请求
除以上情况。
node中的解决方案

原生方式

app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", ctx.headers.origin);
  ctx.set("Access-Control-Allow-Credentials", true);
  ctx.set("Access-Control-Request-Method", "PUT,POST,GET,DELETE,OPTIO