针对项目:vue.js + Express
本例的vue.js项目使用Express框架作为后台数据服务端
什么叫做跨域?
通常情况下是指两个不在同一域名下的页面无法进行正常通行,或者无法获取其他域名下的数据。
主要原因:
是浏览器出于安全问题考虑,采用了同源策略,通过浏览器对JavaScript限制,防止用户恶意获取非法数据。
如果直接请求不支持跨域的服务,控制台就会console报错。
因为极大多数依赖后端数据服务器的项目,都需要进行跨域请求。
所以,这里vuejs和express提供了两种可以支持跨域的方式。
第一种 · 跨域方式
首先是vue.js的方式,对于不支持跨域的服务器端的请求,客户端不能配置影响到服务端的代码。如果需要完成该功能,可以使用vue-resource的jsonp()方法,具体的请求代码如下所示:
this.$http.jsonp('/someUrl, [data], [options]).then(successCallback, errorcallback);
注意几点
jsonp()
:
- jsonp()不能发送post请求,不管是否跨域;
- 只要用jsonp()方式,则该请求一定是get方式的;
- 因为本质是script方式加载的。
使用jsonp()方式非常麻烦,由于本次服务端也可以直接更改,
所以这里不适用此方法进行配置。
只是告知读者可以使用此方式发送请求。
=======================================================================
第二种 · 跨域方式
需要更改Express编写的服务端的代码,在app.js中进行全路由的配置,具体代码如下:
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200); // 请求快速返回
}
else {
next();
}
});
注意几点:
此代码需要咋所有的路由路径配置之前执行,否则代码之前定义的路由不接受此跨域的头部配置。
如果开发者不需要所有的路由都支持跨域,也可以选择在单个路由中配置相关的头信息。
以上就是关于“ vue.js支持的两种跨域方式 - 讲解篇 ” 的全部内容。