vue自2.0开始,vue-resource不再作为官方推荐的ajax方案,转而推荐使用axios。
同时支持浏览器端和服务端的请求。
由于axios的这一特性,vue的服务端渲染对于axios简直毫无抵抗力。 让我们一起来读读源码,看看它是如何实现的。
在axios/lib/core/dispatchRequest.js文件中暴露的dispatchRequest方法就是axios发送请求的方法,其中有一段代码为:
//定义适配器,判断是在服务器环境还是浏览器环境 var adapter = config.adapter || defaults.adapter; return adapter(config).then(function onAdapterResolution(response) { throwIfCancellationRequested(config); // 处理返回的数据 response.data = transformData( response.data, response.headers, config.transformResponse ); return response; }, function onAdapterRejection(reason) { if (!isCancel(reason)) { throwIfCancellationRequested(config); // 处理失败原因 if (reason && reason.response) { reason.response.data = transformData( reason.response.data, reason.response.headers, config.transformResponse ); } } return Promise.reject(reason); }); };
这段代码首先定义了一个适配器,然后返回了适配器处理后的内容。 如果没有在传入的配置参数中指定适配器,则取默认配置文件中定义的适配器,再让我们来看看默认文件/lib/defaults.js定义的适配器:
function getDefaultAdapter() { var adapter; if (typeof XMLHttpRequest !== 'undefined') { //通过判断XMLHttpRequest是否存在,来判断是否是浏览器环境 adapter = require('./adapters/xhr'); } else if (typeof process !== 'undefined') { //通过判断process是否存在,来判断是否是node环境 adapter = require('./adapters/http'); } return adapter; }
到这里真相大白,XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能;process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程。原来作者是通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的,从而在不同的环境提供不同的http请求模块,实现客户端和服务端程序的兼容。
同理,我们在做ssr服务端渲染时,也可以使用这个方法来判断代码当前的执行环境。
客户端防止xsrf攻击
先来了解一下XSRF,以下内容来自维基百科。
XSRF跨站请求伪造(Cross-site request forgery),是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
举个例子:
假如一家网站执行转账的操作URL地址如下:
http://www.examplebank.com/withdraw?account=AccoutName&psd=1000&for=PayeeName
那么,一个恶意攻击者可以在另一个网站上放置如下代码:
<img src="http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman">
如果有账户名为Alice的用户访问了恶意站点,而她之前刚访问过银行不久,登录信息尚未过期,那么她就会损失1000资金。
-------我是分割线,以上内容来自维基百科-------
axios是如何做的?
// 添加 xsrf 请求头 // 只在标准浏览器环境中才会起作用 if (utils.isStandardBrowserEnv()) { var cookies = require('./../helpers/cookies'); // 添加 xsrf 请求头 var xsrfValue = (config.withCredentials || isURLSameOrigin(config.url)) && config.xsrfCookieName ? cookies.read(config.xsrfCookieName) : undefined; if (xsrfValue) { requestHeaders[config.xsrfHeaderName] = xsrfValue; } }
首先,axios会检查是否是标准的浏览器环境,然后在标准的浏览器环境中判断,如果设置了跨域请求时需要凭证且请求的域名和页面的域名相同时,读取cookie中xsrf token 的值,并设置到承载 xsrf token 的值的 HTTP 头中。
在node端支持设置代理
内部一些针对具体项目环境的二次封装