AJAX跨域

AJAX跨域

原因：

1. 浏览器限制（先执行，后限制）
   这也是为什么，你通过开发者工具看到的返回是正常的，但是控制台却报错了
2. 跨域
   同源策略
3. xhr

处理方法：

一. 客户端设置浏览器禁止跨域检查

浏览器程序启动时加参数【 –disable-web-security】
下面是windows 的设置方法：

二. JSONP

原理：动态生成一个script标签，通过script标签发起请求，后端需要做设置
特点：
1. 只能处理GET请求，手动指定POST的方式，控制台查看type仍然是GET
2. 请求url字符串后面会跟一个名叫【callback】的参数，后端需要对这个【callback】进行处理，这个callback可以改名，前后都需要进行配置
3. 后端返回的是JS代码，而非JSON对象
4. JS代码：返回一个函数，函数名就是callback的值，函数形参就是后端要返回的JSON对象

三. XHR设置可以跨域（一、二允许跨域、三、隐藏跨域）

一. 被调用端服务器程序设置，修改返回的HTTP头信息，加入允许跨域的域名、方式等信息，通知浏览器允许跨域
1. res.header(“Access-Control-Allow-Origin”, “*”);
每个跨域请求在请求头部都会有origin的字段，后端配置的时候最好设置为请求头的origin（用变量接收请求头的origin信息），而不是设置为*，因为cookie跨域不可以用
2. res.header(“Access-Control-Allow-Headers”, “Origin,X-Requested-With,Content-Type,Accept,X-Access-Token,Auth-Key”);
后端配置的时候最好设置为请求头的Headers（用变量接收请求头的Headers信息），而不是固定值
3. res.header(“Access-Control-Allow-Methods”,”*”);
允许所有的请求方式（GET/POST/PUT/DELETE/HEAD/OPTION）
4. res.header(“Access-Control-Allow-Credentials “,”true”);
允许cookies跨域，cookie的域名一定是被调用方的域名
5. res.header(“Access-Control-Max-Age “,3600)，这个响应首部表示 preflight request （预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被缓存多久，禁用的话每次都需要发OPTION请求，即预检请求。
注：OPTIONS，跨域需要发两次请求，第一次是预检请求即OPTION，成功后才会发出真正的请求，可以通过设置缓存请求头信息，来减少OPTION的次数
二. 被调用端HTTP服务器设置（nginx/apache）同上配置
三. 使用（nginx/apache）配置转发代理