同源策略与跨越及解决方案

最新推荐文章于 2023-01-16 17:34:52 发布

敲代码好难

最新推荐文章于 2023-01-16 17:34:52 发布

阅读量265

点赞数

文章标签： ajax html javascript

本文链接：https://blog.csdn.net/weixin_43989621/article/details/119961772

版权

同源策略是浏览器的一个安全功能，不同源的网页脚本在没有明确授权的情况下，不能读写对方资源。所谓同源是指 “协议+域名+端口” 三者相同

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5RCef65-1630075030159)(C:\Users\song\AppData\Local\Temp\1630068691995.png)]$

使用AJAX技术（XMLHttpRequest 对象），从一个网页去请求另一个网页资源时，违反浏览器同源策略限制，引起的安全问题，称为跨域。

域名
- 主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js
- 子域名不同 http://www.666.baidu.com/index.html –>http://www.555.baidu.com/test.js
- 域名和IP地址 http://www.baidu.com/index.html –>http://180.149.132.47/test.js
端口
- http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js
协议
- http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js
注意：localhost和10,7,162,97虽然都指向本机，但也属于跨域

前后端分离项目

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Me2LICi-1630075030177)(C:\Users\song\AppData\Local\Temp\1630074686639.png)]$

首先，不知道大家有没有注意，不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，
比如我们有可能使用一个网络上的图片，就可以请求得到，<img src="https://ss3.baidu.com/aa.jpg/> jsonp就是使用同源策略这一“漏洞”，实现的跨域请求
其基本原理是利用HTML的

代码实现

服务端 jsonp封装；将响应数据封装到名为callback的函数中返回


router.get('/test', (request,response) => {
     response.write( “callback( {code:1,data:{content:'内容'}} )”);
}

在这里插入图片描述

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource ）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用sharing的限制。

在这里插入图片描述

在这里插入图片描述

关注