ajax跨域

ajax跨域

前台调用后台服务接口的时候，接口不是同一个域，就会产生跨域问题

• 发生ajax跨域的原因:
  浏览器限制、跨域、XHR(XMLHttpRequest)请求

---

1、浏览器限制：

指定参数，使浏览器不做校验

命令行参数启动：
chrome --disable-web-security --user-data-dir=g:\temp3

---

2、XHR(XMLHttpRequest)请求：

发送不是xhr的请求，可以是jsonp

• jsonp是通过动态创建一个script，在script中将请求发送给后台；
• 后台返回一个js对象；
• 通过约定一个参数callback，让后台认识这是一个jsonp：
  dataType:"jsonp" , jsonp:"callback"
• 后台将原来的json改为js函数返回：callback后面所带的参数作为函数名，原先的json对象作为函数内容；
  _参数代表是否被缓存，可以在ajax发送时加上catch:true，表示允许缓存

jsonp的弊端：

• 服务器需要改动代码来支持
• 只支持GET，js回来只能get
• 发送的不是xhr请求，不能有异步回调

ps: xhr发送后，返回的是一个json对象

---

3、跨域：

被调用方来解决：

• 在被调用方进行设置，让他支持跨域，对HTTP跨域要求做了修改，域名A调用域名B，B加入字段，告诉A浏览器，允许B访问

具体解决方法:

• 服务器端实现

  浏览器发送请求时，发现跨域，则会加上orign头发送过去

  服务器返回回来的头字段里有允许的设置，则会通过校验

• NGINX配置

• APACHE配置

调用方来解决：

• 在调用方进行设置，隐藏跨域，
  通过代理，从浏览器发出，都是A域名的请求，在代理中，A域名转为B域名

---

关于简单请求与非简单请求

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

• 方法为：get、head、post

• 请求头里，没有自定义头

• 请求类型Content-Type为以下三种中的一种：

text/plain、multipart/form-data、application/x-www-form-urlencoded

非简单请求：先判断，再执行

• 方法为：put、delete

• 带自定义的ajax请求

• 发送json格式的ajax请求:

content-Type:"application/json;charset=utf-8"

• options预检命令

非简单请求会先返回回来一个options预检命令

其中头部字段返回回来：
Access-Control-Request-Headers:content-type;

所以应在浏览器端添加头：
res.addHeader("Access-Control-Allow-Headers","Content-Type");

---

带cookie跨域

带cookie跨域时，origin必须时全匹配，不能使用*

还应加上字段，允许cookie

res.addHeader("Access-Control-Allow-Credentials","true");