前端，什么是跨域，及跨域常见的解决方案（简讲）「建议收藏」

编程汇总 • 2025-01-16 15:51 • 阅读 3

一、认识跨域

1、同源

符合”协议+域名+端口”三者相同，就是同源

2、同源策略

同源策略，其初衷是为了浏览器的安全性，通过以下三种限制，保证浏览器不易受到XSS、CSFR等攻击。

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 Js对象无法获得

AJAX 请求不能发送

3、跨域

引入同源对概念，是因为我们常指对跨域，其实就是浏览器同源策略限制的一类请求场景。

4、常见跨域情景

URL	说明	是否允许通信
http://www.domain.com/a.jshttp://www.domain.com/b.jshttp://www.domain.com/lab/c.js	同一域名，不同文件或路径	允许
http://www.domain.com:8000/a.jshttp://www.domain.com/b.js	同一域名，不同端口	不允许
http://www.domain.com/a.jshttps://www.domain.com/b.js	同一域名，不同协议	不允许
http://www.domain.com/a.jshttp://192.168.4.12/b.js	域名和域名对应相同ip	不允许
http://www.domain.com/a.jshttp://x.domain.com/b.jshttp://domain.com/c.js	主域相同，子域不同	不允许
http://www.domain1.com/a.jshttp://www.domain2.com/b.js	不同域名	不允许

5、跨域解决方案

通过jsonp跨域

document.domain + iframe跨域

location.hash + iframe

window.name + iframe跨域

postMessage跨域

跨域资源共享（CORS）

nginx代理跨域

nodejs中间件代理跨域

WebSocket协议跨域

注：我的笔记着重学习第 1 和第 6 种方法，其它第不做介绍。

6、*补充

这里不是重点，只要知道我们平时说对跨域是狭义对跨域，仅仅是浏览器出于安全考虑对一种限制，而广义对跨域，包含以下特征：

资源跳转： A链接、重定向、表单提交。

资源嵌入：

/pre>

p>返回内容

/p>

pre class='language-javascript'>

onBack({

  

  "status": true, "user": "admin"})

/pre>

p>在这里，返回内容调用了全局函数 onBack ，并且是带数据的调用。

/p>

h3>3、Jquery 实现

/h3>

pre class='language-javascript'>

$.ajax({

    url: 'http://www.demo.com:8080/login',

    type: 'get',

    dataType: 'jsonp',  // 请求方式为jsonp

    jsonpCallback: "onBack",    // 自定义回调函数名

    data: {}

});

/pre>

h3>4、vue 实现

/h3>

pre class='language-javascript'>

this.$http.jsonp('http://www.domain2.com:8080/login', {

    params: {},

    jsonp: 'onBack'

}).then((res) => { console.log(res); })

/pre>

h2>三、跨域资源共享（CORS）

/h2>

p>好吧，我的笔记里不全面整理了，直接接入阮一峰老师的博客

跨域资源共享 CORS 详解——阮一峰

/p>

前端，什么是跨域，及跨域常见的解决方案（简讲）「建议收藏」

一、认识跨域

1、同源

2、同源策略

3、跨域

4、常见跨域情景

5、跨域解决方案

6、*补充

相关推荐