浏览器跨域问题的几种解决方案

最新推荐文章于 2024-10-12 17:33:26 发布

qq_43233278

最新推荐文章于 2024-10-12 17:33:26 发布

阅读量389

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_43233278/article/details/102613771

版权

本文介绍了浏览器跨域问题的四种常见解决方案：JSONP、CORS、降域和postMessage。详细讲解了它们的原理和应用场景，包括JSONP的简单实现、CORS的机制以及降域和postMessage的安全性考虑。

摘要由CSDN通过智能技术生成

浏览器跨域问题的集中解决方案

跨域问题的原因是浏览器同源策略的限制。
同源策略限制从一个源加载的文档或脚本与来之另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的安全机制。

一个源的定义：如果协议、端口（如果指定了一个）和域名对于两个页面是相同的，则两个页面具有相同的源。

通常解决跨域问题有以下几种方法
1.jsonp
2.cors
3.降域
4.postmessage

jsonp

原理

首先利用动态添加script标签，定制src属性来实现跨域。
通过前端方法作为参数船体到服务器端，然后由服务器端渗入参数后返回实现服务器端向客户端通信
由于使用script标签的src属性，因此之支持get的方法

jsonp简单实现

一个简单的jsonp实现，其实就是拼接url，然后动态添加一个script元素刀头部

function jsonp(req) {
  var script = document.createElement('script')
  var url = req.url + '?callback=' + req.callback.name
  script.src = url
  document.getElementsByTagName('head')[0].appendChild(script)
}

// 调用代码
function hello(res) {
  console.log('hello ' + res.data)
}

jsonp({
  url: "",