Ajax对新手最好的理解，ajax跨域完全讲解，很详细！ajaxasync不看后悔，

jsonp 不是标准，只是一种约定的协议，使用需要前后端协商一致。jsonp通过动态创建script,然后发送出去（然后自动销毁，如果需要查看创建的script,需要打断点）。普通的ajax请求，请求格式是Type=xhr,返回的格式是json 用jsonp请求，请求格式是Type=script ,返回的格式是javascript,返回的值作为javascript函数的参数返回。非简单请求会先发一个预检命令到服务端（OPTIONS）,服务端允许了才发送POST请求，所以是先判断再执行。在nginx中：把所有请求转发到8080端口。把要调用的服务器地址用8081端口代理。

产生跨域原因

浏览器限制跨域（协议、主机名、端口号等不同就属于跨域）XHR（XMLHttpRequest）请求（如果是json请求就不会）产生跨域原因

解决思路

针对浏览器，修改浏览器安全配置，不过这需要修改每个浏览器，不实际把XHR 请求转为jsonp请求，不过jsonp请求已经越来越不满足当前需求了跨域代理解决思路

解决方法

jsonp解决

jsonp 不是标准，只是一种约定的协议，使用需要前后端协商一致。

jsonp通过动态创建script,然后发送出去（然后自动销毁，如果需要查看创建的script,需要打断点）。

创建的script如下图:

创建的script.PNG

普通请求和jsonp请求区别:

捕获.PNG

解释：

普通的ajax请求，请求格式是Type=xhr,返回的格式是json用jsonp请求，请求格式是Type=script ,返回的格式是javascript,返回的值作为javascript函数的参数返回。

jsonp弊端

服务器需要改动代码支持只支持get请求发送的不是XHR请求（XHR支持异步等）

被调用方解决-支持跨域

在相应头增加字段：可以在

1.服务器

2.nginx

3.apache

这三者之一增加

Filter解决方法

浏览器是先执行再判断跨域请求返回值多了origin字段

解决方法：

在服务端：

其中8081端口是client端口

简单请求和非简单请求

简单请求：先执行再判断；

非简单请求：先判断在执行；

简单请求定义(满足以下几点即为简单请求）：

方法：GETHEADPOST请求header里面：text/plainmultipart/form-dataapplication/x-www-form-urlencoded无自定义头Content-type为一下几种：

非简单请求：

putdelete发送json格式的ajax请求带自定义头的ajax请求

非简单请求.PNG

非简单请求会先发一个预检命令到服务端（OPTIONS）,服务端允许了才发送POST请求，所以是先判断再执行。

缓存预检命令：

在服务端设置缓存预检命令后

：

缓存.PNG

浏览器缓存后，浏览器不需要再次发送预检命令。

带cookie的跨域

Access-Control-Allow-Origin字段不能为*增加Access-Control-Allow-Credentials值为true的字段

多站点带cookie跨域解决方法：

在服务端通过origin字段得到请求端域名，然后增加到

Access-Control-Allow-Origin字段中

带自定义头跨域

自定义头跨域.PNG

然后在服务端增加自定义头（写死）：

服务端自定义头.PNG

或者在服务端获取请求头，然后加入进去（推荐）

被调用方解决跨域：nginx

被调用方解决跨域：apache

调用方解决跨域（隐藏跨域）

反向代理

在nginx中：

把所有请求转发到8080端口。

把要调用的服务器地址用8081端口代理。