Vue.js基于$.ajax实现数据的跨域增删查改 - keepfool(3)_H5之家

基于$.ajax声明一个简单的AjaxHelper构造器，AjaxHelper构造器的原型对象包含5个方法，分别用于处理GET, POST, PUT, DELETE和JSONP请求。

function AjaxHelper() { this.ajax = function(url, type, dataType, data, callback) { $.ajax({ url: url, type: type, dataType: dataType, data: data, success: callback, error: function(xhr, errorType, error) { alert('Ajax request error, errorType: ' + errorType + ', error: ' + error) } }) } } AjaxHelper.prototype.get = function(url, data, callback) { this.ajax(url, 'GET', 'json', data, callback) } AjaxHelper.prototype.post = function(url, data, callback) { this.ajax(url, 'POST', 'json', data, callback) } AjaxHelper.prototype.put = function(url, data, callback) { this.ajax(url, 'PUT', 'json', data, callback) } AjaxHelper.prototype.delete = function(url, data, callback) { this.ajax(url, 'DELETE', 'json', data, callback) } AjaxHelper.prototype.jsonp = function(url, data, callback) { this.ajax(url, 'GET', 'jsonp', data, callback) } AjaxHelper.prototype.constructor = AjaxHelper 实现GET请求发送get请求

var ajaxHelper = new AjaxHelper() var demo = new Vue({ el: '#app', data: { gridColumns: ['customerId', 'companyName', 'contactName', 'phone'], gridData: [], apiUrl: 'http://localhost:15341/api/Customers' }, ready: function() { this.getCustomers() }, methods: { getCustomers: function() { // 定义vm变量，让它指向this,this是当前的Vue实例 var vm = this, callback = function(data) { // 由于函数的作用域，这里不能用this vm.$set('gridData', data) } ajaxHelper.get(vm.apiUrl, null, callback) } } })

由于客户端和服务端Web API是分属于不同站点的，它们是不同的源，这构成了跨域请求。
这时请求是失败的，浏览器会提示一个错误：
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1::8020' is therefore not allowed access.

跨域解决方案

现在碰到了请求跨域的问题，结合前面讲的一些概念，我们大致可以猜到解决跨域请求的两种方式：

在服务端启用CORS。

让无服务端拥有处理JSONP的能力。

这两种跨域解决方案的区别是什么呢？

JSONP只支持GET请求；CORS则支持GET、POST、PUT、DELETE等标准的HTTP方法

使用JSONP时，服务端要处理客户端请求的callback参数（"callback"这个名称是可以指定的）；而使用CORS则不需要提供这样的处理。

JSONP从服务端获取到的是script文件；CORS则是一段XML或JSON或其他格式的数据

JSONP支持IE8, IE9复古的浏览器；CORS则支持现代主流的浏览器

选择JSONP还是CORS？除了极少数的情况，我们都应当选择CORS作为最佳的跨域解决方案。

启用CORS

在Nuget Package Manager Console下输入以下命令:

Install-Package Microsoft.AspNet.WebApi.Cors

首先，在WebApiConfig中启用CORS

public static class WebApiConfig { public static void Register(HttpConfiguration config) { // ... config.EnableCors(); } }

然后在CustomersController上添加EnableCors特性，origins、headers和methods都设为*

[EnableCors(origins: "*", headers: "*", methods: "*")] public class CustomersController : ApiController { }

Web API的CORS配置说明及原理，下面这个地址已经讲得很清楚了：

刷新页面，现在数据可以正常显示了。

View Demo

在Chrome开发工具的Network选项下，可以看到Response Header的Content-Type是application/json。

文章开头也说了，CORS的跨域方式支持现代的主流浏览器，但是不支持IE9及以下这些古典的浏览器。

如果我们偏要在IE9浏览器中（Vue.js不支持IE8及以下的浏览器，所以不考虑IE 6,7,8）实现跨域访问，该怎么做呢？
答案是使用JSONP请求。

实现JSONP请求

将getCustomers方法的get请求变更为jsonp请求：

getCustomers: function() { // 定义vm变量，让它指向this,this是当前的Vue实例 var vm = this, callback = function(data) { // 由于函数的作用域，这里不能用this vm.$set('gridData', data) } ajaxHelper.jsonp(vm.apiUrl, null, callback) }

刷新页面，请求虽然成功了，但画面没有显示数据，并且弹出了请求错误的消息。

让WebAPI支持JSONP请求

在Nuget Package Manager中输入以下命令：

Install-Package WebApiContrib.Formatting.Jsonp