WebAPI跨域与AJAX请求
一、 什么是跨域
- 1. 什么是跨域
跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加 的安全限制。
同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求 JavaScript 或 Cookie 只能 访问同域下的内容。
正是由于这个原因，不同项目之间的请求就会被浏览器阻止。比如最常见的场景：Web API作为数据服务层， 它是一个单独的项目，MVC 项目作为 Web 的显示层，这个时候 MVC 项目就需要请求 WebAPI 接口获取数据 并展现在页面上。因为 Web API 和 MVC 是两个不同的项目，所以运行之后就存在跨域的问题。
CORS 全称 Cross Origin Resource Sharing，中文全称跨域资源共享。它解决跨域问题的原理是通过向 HTTP 的请求报文和响应报文里面加入相应的标识，告诉浏览器它能访问哪些域名的请求。
- 2. 使用ajax请求Web API时的跨域问题
1) 服务端没有配置跨域许可JavaScript的Ajax请求，则客户端使用Ajax请求Web API时会出现CORS跨域拦截错误
基于上一节课完成的Web API服务项目，添加客户端项目，然后添加静态页面Index.html，编写AJAX代码访问Web API地址URL /api/Student。
$(function () {
$.ajax({
url: "http://localhost:49795/api/Student",//请求的API服务的地址
type: "get",//请求类型
success: function (data) {
console.log(data); //控制台输出
}
});
});
浏览该页面，查看控制台返回信息，发现有一个错误，No 'Access-Control-Allow-Origin' 看到这段文字就表示JavaScript跨域请求被阻止了，需要配置允许跨域请求才能继续调用。
在Web API服务端的Web.config中配置允许跨域请求，在<system.webServer>节点下添加：
<!--httpProtocol配置http协议头，内部是协议内容-->
<httpProtocol>
<!--自定义消息头-->
<customHeaders>
<!—允许任意客户端来源-->
<add name="Access-Control-Allow-Origin" value="*"/
</customHeaders>
</httpProtocol>
2) 服务端没有配置跨域请求方式OPTIONS，则客户端发起delet、put等复杂请求时会出现关于OPTIONS的跨域问题。
如果服务端没有配置跨域请求方式OPTIONS ，Ajax 直接向服务器发送delete、put等请求时，会出现Method Not Allowed错误，表示我们AJAX的提交方式服务器端不允许。
原因AJAX向服务器端发起delet、put等复杂请求时，会首先发送一个Options的请求，要求服务器同意，服务器如果同意则在发delete、put等复杂请求。所以首先我们要对options进行处理。
在服务端的web.config文件中的<system.webServer>节点下添加配置
<!--允许任意请求头部-->
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<!--允许GET, POST, PUT, DELETE,OPTIONS请求方式-->
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS" />
并在服务端的控制器中添加一个public string Options()方法，返回null即可
二、 AJAX请求Web API
解决了AJAX请求Web API中最大的障碍——跨域问题，这个跨域问题解决办法适用于各种前端JavaScript框架请求Web API。以及解决了PUT和DELETE请求过程中的OPTIONS问题，下面就可以用正常的方式请求Web API接口了。
例：ajax请求添加学生
在AddStudent.html页面中使用ajax的post方法，请求API接口，添加学生
$(function () {
$("#btnOK").click(function () {
$.ajax({
url: "http://localhost:49795/api/Student",
type: "post",
data: {
"StudentID": $("#txtID").val(),
"Name": $("#txtName").val(),
"Age": $("#txtAge").val(),
"Tel": $("#txtTel").val()
},
success: function (data) {
console.log(data);
},
error: function (msg) {
console.log(msg);
}
});
});
});
在UpdateStudent.html 使用AJAX PUT方法请求API接口，修改学生数据
$(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:49795/api/Student/" + $("#txtID").val(),
type: "put",
crossDomain: true,
data: {
"StudentID": $("#txtID").val(),
"Name": $("#txtName").val(),
"Age": $("#txtAge").val(),
"Tel": $("#txtTel").val()
},
success: function (data) {
console.log(data);
},
error: function (msg) {
console.log("error:" +
msg.responseText);
}
});
});
});