AJAX跨域知识

1. 什么是AJAX跨域

  Ajax请求一个目标地址为非本域(协议、域名、端口任意一个不同)的web资源,并根据响应获得外部应用数据。
  当我们请求一个外部服务时,浏览器会基于安全问题拒绝授权访问。

2. 产生跨域的原因

2.1 浏览器的同源策略

2.1.1 同源政策的含义

  1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
  最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

  • 协议相同
  • 域名相同
  • 端口相同

2.1.2 同源政策的目的

  同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

2.1.3 同源政策的限制范围

  随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。

  • Cookie、LocalStorage 和 IndexDB 无法读取。
  • DOM 无法获得。
  • AJAX 请求不能发送。

3. 解决跨域的方法

3.1 禁止浏览器进行检查

通过给浏览器设置参数,关闭同源策略。
以chrome为例:

3.1.1 windows

右键chrome快捷方式,在属性里给浏览器添加参数:
--disable-web-security --user-data-dir
快捷方式添加位置:

image.png

3.1.2 linux

chromium-browser --disable-web-security

3.1.3 mac

open -a "Google Chrome" --args --disable-web-security --user-data-dir

3.2 使用JSONP方式

3.2.1 JSONP概念

  JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

3.2.2 JSONP的使用

  • 在服务器端实现对JSONP支持
  • Jquery调用方法($.ajax()方法)
$.ajax({
url:'www.example.com/a.php?id=1',
dataType:'jsonp',
jsonp:'jsonp_callback',
success:function(){
//dostuff
},
});

3.2.3 JSONP的弊端

  • 需要改动服务器的代码
  • 只能使用GET方法请求
  • 发送的不是XHR请求而是script
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容