WebAPI跨域与AJAX请求

一、        什么是跨域

  1. 1.       什么是跨域

跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加 的安全限制。

同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求 JavaScript 或 Cookie 只能 访问同域下的内容。

正是由于这个原因，不同项目之间的请求就会被浏览器阻止。比如最常见的场景：Web API作为数据服务层， 它是一个单独的项目，MVC 项目作为 Web 的显示层，这个时候 MVC 项目就需要请求 WebAPI 接口获取数据 并展现在页面上。因为 Web API 和 MVC 是两个不同的项目，所以运行之后就存在跨域的问题。

CORS 全称 Cross Origin Resource Sharing，中文全称跨域资源共享。它解决跨域问题的原理是通过向 HTTP 的请求报文和响应报文里面加入相应的标识，告诉浏览器它能访问哪些域名的请求。

  1. 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);
                    }
                });
            });
        });