ajax跨域学习笔记

首先说下，这个笔记是学习慕课网视频做的笔记，为了方便自己回顾一下做的笔记。视频出自晓风轻，视频更清楚可以去看。

ajax跨域解决思路

用时满足以下条件才有可能发生ajax跨域
1.跨域（方法：调用方和被调用方）
2.浏览器限制（方法：修改浏览器配置，但不推荐）
3.XHR(XmlHttpRequest)的请求（方法：请求协议改成使用jsonp）

先说说jsonp（了解即可，不推荐使用）

jsonp的ajax配置

jsonp请求类型是script，返回类型是js脚本，查看如下：

图片发自App

前后台约定了参数里带了callback，那么就是一个jsonp请求。后台通过请求中的callback识别这是一个jsonp的请求，jsonp不是官方协议。若是前台请求把callback名字改掉，后台相应的也要改掉，否则返回的是一个application/json，而不是application/script

jsonp的原理是创建一个动态script，在这个动态script里把请求发出去，请求完成后，该动态script在header里会销毁。

如果要看到该过程可以下载一个不压缩的jquery.js,比如版本1.11.3，大概在chrome sources的9800行debug一下，如下图：

图片发自App

如下图可以看到这个动态script请求

图片发自App

如下图圈中的两个地方，是需要定义的：

图片发自App

定义方法：

jsonp："callback2",

cache:false,

cache表示缓存

若cache是true，会变成有缓存，如下图：

图片发自App

图片发自App

jsonp有什么弊端

jsonp可以解决跨域问题，但是jsonp越来越不能满足现在的开发要求，用的越来越少。

图片发自App1

若是要改服务器代码，那么api接口不能是别人的，否则无法修改。

jsonp没有xhr许多功能比如异步等。

之所以介绍jsonp是因为有可能面试会碰到。

以下内容结合参考资料：http://blog.csdn.net/u012017645/article/details/54315923

再说说推荐的解决方案-CORS规范

受浏览器的同源策略限制，JavaSript只能请求本域内的资源。跨域资源共享(Cross-Origin Resource Sharing, CORS)是为解决Ajax技术难实现跨域问题而提出的一个规范。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

在此之前，解决此类问题的途径往往是服务器代理、JSONP等，治标不治本。目前基本所有浏览器都已经支持该规范。

CORS约定服务器端和浏览器在HTTP协议之上，通过一些额外HTTP头部信息，进行跨域资源共享的协商。服务器端和浏览器都必需遵循规范中的要求。

CORS把HTTP请求分成两类，不同类别按不同的策略进行跨域资源共享协商。

1. 简单跨域请求。

当HTTP请求出现以下两种情况时，浏览器认为是简单跨域请求：

1)请求方法是GET、HEAD或者POST，

并且当请求方法是POST时，Content-Type必须是以下三个值中的一个：application/x-www-form-urlencoded,multipart/form-data，text/plain。

2)请求中没有自定义HTTP头部。HTTP的头信息不超出以下几种字段：

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type

对于简单跨域请求，浏览器要做的就是在HTTP请求中添加Origin Header，将JavaScript脚本所在域填充进去，向其他域的服务器请求资源。

服务器端收到一个简单跨域请求后，根据资源权限配置，在响应头中添加Access-Control-Allow-Origin Header。浏览器收到响应后，查看Access-Control-Allow-Origin Header，如果当前域已经得到授权，则将结果返回给JavaScript。否则浏览器忽略此次响应。

例如：

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

下面是一个例子，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。请看Origin:http://localhost:8081

图片发自App

跨域解决方向：
1)被调用方解决
2)调用方解决

先来看被调用方解决方案

新增一个拦截器，拦截所有请求，往hearder里加属性，允许该域名和请求方法跨域

图片发自App

chrome里查看如下：

图片发自App