同源之外的请求都可以称之为跨域请求。下表给出了相对同源检测的示例：

跨域资源共享

跨域资源共享（CORS）是一份浏览器技术的规范，提供了Web服务器从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。与JSONP不同，CORS除了支持GET方法以外，还支持其他HTTP方法。用CORS可以让网页设计师用一般的XMLHTTPRequest，这种方式的错误处理比JSONP要来的好。另一方面，JSONP可以在不支持CORS的老旧浏览器上运作，现代的浏览器都支持CORS。

在网页上列出了主流浏览器对CORS的支持情况，包含PC端和移动端的浏览器。

JSONP概念

由于同源策略，一般来说不允许JavaScript跨域访问其他服务器的页面对象，但是HTML的

创建和注册modal-dialog组件

数据的新建和编辑将使用模态对话框，modal-dialog组件的作用就在于此。

AjaxHelper

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

AjaxHelper.prototype.put = function(url,'PUT',callback)

}

AjaxHelper.prototype.delete = function(url,'DELETE',callback)

}
AjaxHelper.prototype.jsonp = function(url,'jsonp',callback)

}
AjaxHelper.prototype.constructor = AjaxHelper

实现GET请求

发送get请求

<pre id="bdc2284f2d184195bfa80ef5fa41c7ee" class="javascript" style="display: block">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是分属于不同站点的，它们是不同的源，这构成了跨域请求。这时请求是失败的，浏览器会提示一个错误：?????????

跨域解决方案

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

• 在服务端启用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下输入以下命令:

首先，在WebApiConfig中启用CORS

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


Web API的CORS配置说明及原理，下面这个地址已经讲得很清楚了：
刷新页面，现在数据可以正常显示了。




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

如果我们偏要在IE9浏览器中（Vue.js不支持IE8及以下的浏览器，所以不考虑IE 6,7,8）实现跨域访问，该怎么做呢？答案是使用JSONP请求。
实现JSONP请求
将getCustomers方法的get请求变更为jsonp请求：
刷新页面，请求虽然成功了，但画面没有显示数据，并且弹出了请求错误的消息。

让WebAPI支持JSONP请求
在Nuget Package Manager中输入以下命令：
然后在Global.asax的Application_Start()方法中注册JsonpMediaTypeFormatter：
刷新页面，使用JSONP请求也能够正常显示数据了。


注意：使用JSONP时，服务端返回的不再是一段JSON了，而是一个script脚本。
在IE9下查看该页面，simple-grid组件也能正常显示数据：


实现POST请求
1. 创建表单对话框
添加一个Create按钮，然后使用modal-dialog组件创建一个表单对话框：
<!--...已省略-->
<div class="container"&gt;
    <div class="form-group"&gt;
        <button @click="this.show = true"&gt;Create</button>
    </div>
</div>
<modal-dialog v-bind:show.sync="show"&gt;

    <header class="dialog-header" slot="header"&gt;
        <h1 class="dialog-title"&gt;Create New Customer</h1>
    </header>

    <div class="dialog-body" slot="body"&gt;
        <div v-show="item.customerId" class="form-group"&gt;
            <label>Customer Id</label>
            <input type="text" v-model="item.customerId" disabled="disabled" />
        </div>
        <div class="form-group"&gt;
            <label>Company Name</label>
            <input type="text" v-model="item.companyName" />
        </div>

        <div class="form-group"&gt;
            <label>Contact Name</label>
            <input type="text" v-model="item.contactName" />
        </div>

        <div class="form-group"&gt;
            <label>Phone</label>
            <input type="text" v-model="item.phone" />
        </div>
        <div class="form-group"&gt;
            <label></label>
            <button @click="createCustomer"&gt;Save</button>
        </div>
    </div>
</modal-dialog>

注意：在新建Customer时，由于item.customerId为空，所以item.customerId关联的表单不会显示；在修改Customer时，item.customerId关联的表单会显示出来。另外，item.customerId是不可编辑的。
2. 修改Vue实例
修改Vue实例的data选项：

添加show属性：用于显示或隐藏表单对话框 

修改gridColumns属性：列包含两个属性，name表示列名称，isKey表示列是否为主键列 

添加item属性：用于新增Customer或修改Customer

添加createCustomer方法：


实现PUT请求
1. 修改sample-grid的template
给主键列添加链接，绑定click事件，事件指向loadEntry方法，loadEntry方法用于加载当前选中的数据。
            
            
        

3. 修改Vue实例的HTML
在Vue实例的simple-grid标签上绑定自定义事件load-entry，load-entry事件指向loadCustomer方法，loadCustomer方法用于加载选中的Customer数据。
    

    
    

我们应将2和3结合起来看，下图阐述了从点击simple-grid数据的链接开始，到最终打开对话框的完整过程：

注意：load-entry是Vue实例的事件，而不是simple-grid组件的事件，尽管load-entry是写在simple-grid标签上的。详情请参考上一篇文章的编译作用域
由于在新建模式和修改模式下标题内容是不同的，因此需要修改modal-dialog的slot="header"部分。根据item.customerId是否有值确定修改模式和新建模式，修改模式下显示"Edit Customer - xxx"，新建模式下显示"Create New Customer"
<header class="dialog-header" slot="header"&gt;
    <h1 class="dialog-title"&gt;{{ item.customerId ? 'Edit Customer - ' + item.contactName : 'Create New Customer' }}</h1>
</header>

然后追加3个方法：loadCustomer,saveCustomer和updateCustomer。
<pre id="2b2a3958abcf4155ac84a4b02ae7ef9c" class="javascript" style="display: block">loadCustomer: function(customerId) {

var vm = this

vm.gridData.forEach(function(item) {

if (item.customerId === customerId) {

// 使用$.set设置item

vm.$set('item',item)

return

}

}),vm.$set('show',true)

},saveCustomer: function() {

this.item.customerId ? this.updateCustomer() : this.createCustomer()

this.show = false

},updateCustomer: function() {

// 定义vm变量，让它指向this,callback = function(data) {

// 更新成功后，重新加载页面数据

vm.getCustomers()

}

// 将vm.item直接PUT到服务端

ajaxHelper.put(vm.apiUrl + '/' + vm.item.customerId,callback)

}

为什么要这么做呢？因为每次打开对话框，不知道是以新建模式还是修改模式打开的，如果不重置item，倘若先以修改模式打开对话框，再以新建模式打开对话框，新建模式的对话框将会显示上次打开的数据。

实现DELETE请求
1. 修改simple-grid组件
在methods选项中添加方法deleteEntry：
调用$.dispatch向父组件派发事件delete-entry。
2. 修改Vue实例的HTML
在simple-grid标签上绑定自定义事件delete-entry，该事件指向deleteCustomer方法。
    

    
    




总结
本篇介绍了同源策略、跨域、CORS和REST等概念，并结合Vue.js和$.ajax实现了一个简单的CURD跨域示例。下一篇，我们将使用Vue的插件vue-resource来完成这些工作。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!