JavaScript跨域

本文涉及的产品
.cn 域名,1个 12个月
简介: 从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。

什么是同源

源 = 协议+域名+端口号

如果有两个url:

协议、域名、端口号   ——完全一致,那么这两个url就是同源的

什么是跨域

从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。

JSONP跨域

JSONP我们在跨域的时候由于当前浏览器(一遍是IE)不支持cors ,我们必须使用另外一种方式跨域

于是我们请求一个js文件,这个js文件会执行一个回调,回调里面就有我们的数据,回调的名字可以随机生成,以callback当参数传给后台,后台会把这个函数再次返回给我们并执行

优点: 最大的优点是兼容ie,跨域

缺点: 由于他是script标签,所以读不到ajax那么精确的状态码,也不知道响应头这些,只能用onload、onerror监听是成功了还是失败了。

由于是script标签,只能发get请求,不支持post

CORS跨域

浏览器默认不同源之间不能互相访问数据,

如果你就是要就是想要两个网站互相访问。

那就是CORS

只需要在被访问的资源,在响应头中写入你要允许的网站

Access-Control-Allow-Origin: foo.example

一句话完美解决

缺点就是不兼容ie,所以ie要用JSONP



目录
相关文章
|
11天前
|
JSON JavaScript 前端开发
js跨域实现
【10月更文挑战第31天】在实际开发中,需要根据具体的需求和项目情况选择合适的跨域解决方案。
14 1
|
6月前
|
JSON JavaScript 前端开发
【JavaScript技术专栏】JavaScript的跨域通信方法
【4月更文挑战第30天】本文探讨了JavaScript中的跨域通信方法,包括:同源策略和跨域通信的概念,以及JSONP、CORS、WebSockets、`window.postMessage()`、代理服务器和WebAssembly的使用。这些技术各有优劣,适用于不同的场景,是Web开发者解决跨域问题的关键工具。随着Web技术的演进,跨域通信的解决方案也将不断更新。
137 0
|
6月前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
4月前
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
58 0
|
4月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
51 0
|
6月前
|
JSON JavaScript 前端开发
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
214 1
|
6月前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
84 2
|
6月前
|
JavaScript 前端开发 安全
JavaScript中跨域资源共享(CORS):原理和解决方案
【4月更文挑战第22天】本文介绍了JavaScript中跨域资源共享(CORS)的原理和解决方案。CORS借助HTTP头部字段允许跨域请求,核心是Access-Control-Allow-Origin响应头。解决方案包括:服务器端设置响应头(如使用Express.js的cors中间件)、使用代理服务器或JSONP。现代Web开发推荐使用CORS,因为它更安全、灵活,而JSONP已逐渐被淘汰。理解并正确实施CORS能提升Web应用性能和安全性。
|
6月前
|
前端开发 JavaScript 安全
JavaScript高级主题:什么是跨域资源共享(CORS)?
JavaScript高级主题:什么是跨域资源共享(CORS)?
70 0
|
6月前
|
JSON JavaScript 前端开发
JS解决跨域问题
JS解决跨域问题
70 0