Ajax 跨域
同源策略
编程中的同源,比较的是两个url是否同源。
主要看下面三个方面:
- 协议是否相同(http https file)
- 主机地址是否相同(www.xxx.com 127.0.0.1)
- 端口(0~65535)(http默认端口是80;https默认端口是443;MySQL默认端口3306)
如果两个url的协议、主机地址、端口都相同,那么这两个url是同源的,否则就是非同源。
违反了同源策略的请求,叫做跨域请求。
如果非同源,那么以下三种行为会受到限制:
- Cookie 无法操作
- DOM 无法操作
- Ajax请求无效(请求可以发送,服务器也会处理这次请求,但是响应结果会被浏览器拦截)
解决跨域
主流的方案有两种:分别是JSONP和CORS.
JSONP
- 原理
- 客户端利用 script 标签的 src 属性,去请求一个接口,因为src属性不受跨域影响。
- 服务端响应一个字符串
- 客户端接收到字符串,然后把它当做JS代码运行。
- 前端需要做什么?
- 如果使用
jQuery
,$.ajax({ dataType: 'jsonp' }
,必须指定dataType选项为jsonp即可
- 如果使用
- 后端需要做什么?
- 如果使用express,那么直接调用 res.jsonp(数据) 即可。
CORS
由于XHR对象被W3C标准化之后,提出了很多XHR Level2的新构想,其中新增了很多新方法(onload、response…)和CORS跨域资源共享。浏览器升级后开始支持CORS方案。
CORS才是解决跨域的真正解决方案。
- 前端需要做什么?
- 无需做任何事情,正常发送Ajax请求即可
- 后端需要做什么?
- 需要加响应头 。或者使用第三方模块 cors 。