两种可以支持跨域的方式 - 讲解篇

针对项目：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支持的两种跨域方式 - 讲解篇 ” 的全部内容。