Javascript 跨域知识详细介绍
什么是跨域?
在 Web 开发中,当一个网页的脚本程序试图去访问另一个网页中的内容时,如果这两个网页之间的协议、域名、端口号不一致,就会触发浏览器的同源策略产生跨域问题。跨域问题是一个非常常见的问题,也是 Web 开发中必须要面对和解决的问题。
同源策略
同源是指,两个页面拥有相同的协议(http/https)、域名 和 端口,只有这三者完全相同才被认为是同源。
同源策略是不允许跨域访问操作(如读写 cookie、DOM 操作等),同源策略的设计是为了保证用户数据的安全,防止恶意脚本窃取用户的个人信息。
跨域的解决方案
1. JSONP( JSON with Padding )
JSONP利用了 script 标签是不受同源策略限制的特性,通过 script 标签引入一个包含回调函数的 json 文本,从而实现跨域访问。
示例:
// 定义回调函数
function handleData(data) {
console.log(data);
}
// 动态创建 script 标签,设置请求url
const script = document.createElement('script');
script.src = 'http://example.com/api/data?callback=handleData';
// 把标签插入到html中
document.getElementsByTagName('head')[0].appendChild(script);
2. CORS( Cross-Origin Resource Sharing )
CORS实现跨域请求的核心思想是在服务端设置允许跨域访问的响应头,浏览器将在请求时检测响应中是否包含这些允许跨域的头信息,如果有,则浏览器会允许对方访问。
示例:
服务端返回响应头信息:Access-Control-Allow-Origin
Access-Control-Allow-Origin: *
表示允许所有域名访问。
3. 代理
代理就是设置一个中间代理服务器,在这个代理服务器上进行跨域请求,再把数据返回给前端,通过代理,前端可以绕开同源策略直接访问需要的资源。
示例:
fetch('/api/data', {
method: 'POST',
credentials: 'include'
})
.then(res => res.json())
.then(res => {
console.log(res);
})
.catch(err => {
console.error(err);
})
前端通过fetch请求代理服务器设置了请求地址为 "/api/data",代理服务器在后台转发请求到 "/domain/api/data" 地址。
总结
以上是跨域的三种解决方案,不同的场景和需求需要选择不同的方案来解决跨域问题。同时,开发者要时刻注意跨域带来的安全问题,防止恶意攻击造成的数据泄漏和其他风险。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript 跨域知识详细介绍 - Python技术站