同源政策

最新推荐文章于 2024-07-30 03:20:19 发布

MichstaBe Stars

最新推荐文章于 2024-07-30 03:20:19 发布

阅读量234

点赞数 1

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/weixin_47085255/article/details/107787983

版权

Ajax 专栏收录该内容

6 篇文章

订阅专栏

练习代码

https://gitee.com/C_chen_C/homologous_policy.git

Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
http://www.example.com/dir/page.html

http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）

同源政策的目的

同源政策是为了保证用户信息的安全, 防止恶意的网站窃取数据。最初的同源是指A网站在客户端设置的Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送 Ajax请求，如果请求，浏览器就会报错。

使用 JSONP 解决同源限制问题

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

将不同源的服务器端请求地址写在 script 标签的 src 属性中

<script src="www.example.com"></script>

服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。

const data = 'fn({name: "张三", age: "20"})';
 res.send(data);

在客户端全局作用域下定义函数 fn

function fn (data) {}

在 fn 函数内部对服务器端返回的数据进行处理

 function fn (data) { console.log(data); }

JSONP 代码优化

客户端需要将函数名称传递到服务器端
将 script 请求的发送变成动态请求
封装 jsonp 函数, 方便请求发送
服务器端diamante优化值 res.jsonp 方法

CORS 跨域资源共享

CORS: 全称为 Cross-origin resource sharing, 即跨域资源共享, 它允许浏览器向跨域服务器发送Ajax请求, 克服了 Ajax 只能同源使用的限制。

Node服务器端设置响应头实例代码：

app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', '*');
     res.header('Access-Control-Allow-Methods', 'GET, POST');
     next();
 })

访问非同源数据服务器端解决方案

同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。

withCredentials属性

在使用Ajax技术发送跨域请求时, 默认情况下不会在请求中携带cookie信息.
withCredentials: 指在涉及到跨域请求时, 是否携带cookie信息, 默认值为false
Access-Control-Allow-Credentials: true 允许客户端发送请求时携带cookie