跨域问题及其解决方法

一、什么是跨域

当a.qq.com域名下的页⾯或脚本试图去请求b.qq.com域名下的资源时，就是典型的跨域行为。跨域的定义从受限范围可以分为两种，⼴义跨域和狭义跨域。

 

 

（一）广义跨域

⼴义跨域通常包含以下三种⾏为：
1. 资源跳转：a链接、重定向。
2. 资源嵌⼊：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等⽂件外链。
3. 脚本请求：浏览器存储数据读取、dom和js对象的跨域操作、js发起的ajax请求等。
其中，资源跳转和资源嵌⼊⾏为可以正常请求到跨域资源，脚本请求在未经任何处理的情况下，通常会有跨域

（二）狭义跨域

狭义跨域正是浏览器同源策略限制的⼀类请求场景，即我们通常说的跨域⾏为，通常包含以下三种⾏为：
1. cookie、localStorage和indexDB⽆法读取。
2. dom和js对象⽆法获取和操作。
3. ajax请求⽆法发送

二、常见的跨域场景 

  浏览器安全的基石就是“同源策略”，即如果A网站设置的cookie，B网站如果想访问必须满足三个要求：同一种协议、同一个域名、同一个端口号。
  举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口号是80（可以省略，http默认80，https默认443）
  例如：

   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 ：不同源（端口不同）

三、跨域解决方法

（一）ajax跨域请求解决方案

　　1.jsonp跨域解决

jsonp (JSON with Padding)，是JSON的⼀种“使⽤模式”，可以让⽹页跨域读取数据。其本质是利⽤script标签的开放策略，浏览器传
递callback参数到后端，后端返回数据时会将callback参数作为函数名来包裹数据，从⽽浏览器就可以跨域请求数据并定制函数来⾃动处理
返回数据。

 

 

 

jsonp跨域代码示例

var script = document.createElement('script');
script.type = 'text/javascript';
// 传参callback给后端，后端返回时执⾏这个在前端定义的回调函数
script.src = 'http://a.qq.com/index.php?callback=handleCallback';
document.head.appendChild(script);
// 回调执⾏函数
function handleCallback(res) {
alert(JSON.stringify(res));
}
jsonp跨域优点：
jsonp兼容性强，适⽤于所有浏览器，尤其是IE10及以下浏览器。
jsonp跨域缺点：
没有关于调⽤错误的处理。
只⽀持GET请求，不⽀持POST请求以及⼤数据量的请求，⽽且也⽆法拿到相关的返回头，状态码等数据。
callback参数恶意注⼊，可能会造成xss漏洞。

 

标签：http,跨域,script,及其,解决,浏览器,com,请求
来源： https://www.cnblogs.com/wangguoxinyue/p/16248211.html