随着前端MVVM框架的兴起，前后端分离的开发模式逐渐趋于主流。今天便给大家分享一下使用Asp.net Web Api进行前后端分离开发时，新手长犯的几个错误，希望对大家有所帮助！

1.配置跨域

什么是跨域问题，请各位自行搜索。

由于前后端分离，前端项目通常与API项目部署在不同域名中，必然会导致跨域问题。使用Chrome调试，会如果出现如下图的提示。

ASP.Net Web API（.Net Framework）前后端分离——填坑指南跨域问题典型提示

在Web API中配置允许跨域的两种方式：

1.使用CORS（什么是CORS请自行搜索）

配置如下：

安装Nuget包：

Microsoft.AspNet.WebApi.Cors

ASP.Net Web API（.Net Framework）前后端分离——填坑指南

 /// <summary> 
 /// webApi 全局开启跨域 
 /// </summary> 
 /// <param name="config"></param> 
 public static void EnableCors(HttpConfiguration config)
 {
     //允许跨域的域名,测试时可设置为*，正式部署是设置为前端网站的域名 
     var oringins = "*";
     //允许跨域的请求头，通常设置为* 
     var headers = "*";
     //允许跨域的HttpMethod,通常设置为* 
     var methods = "*";
     var corsConifg = new EnableCorsAttribute(oringins, headers, methods);
     //设置为true，表示允许客户端发送Cookie和Http认证信息
     corsConifg.SupportsCredentials = true;
     config.EnableCors(corsConifg);
 }

注：跨域请求默认不发送Cookie和HTTP认证信息，若需要发送Cookie，必须要在 AJAX 请求中打开 withCredentials 属性，并且服务器的返回头中必须包含

Access-Control-Allow-Credentials:true 且服务器返回头中

Access-Control-Allow-Origin 就不能再设置为 *，而必须要显示指明允许哪些源访问。

2.在WebConfig中配置自定义响应头（仅部署在IIS中支持，SelfHost不支持）

 <httpProtocol> 
 <customHeaders> 
 <!--允许跨域的HttpMethod，请注意不能用*--> 
 <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/> 
 <!--允许跨域的请求头，请注意不能用*--> 
 <add name="Access-Control-Allow-Headers" value="x-requested-with,Content-Type"/> 
 <!--允许跨域的域名,*表示全部--> 
 <add name="Access-Control-Allow-Origin" value="*" /> 
 <!--允许Cookie跨域--> 
 <add name="Access-Control-Allow-Credentials" value="true" /> 
 </customHeaders> 
 </httpProtocol>

ASP.Net Web API（.Net Framework）前后端分离——填坑指南通过WebConfig配置跨域

注：任何asp.net应用程序均可通过此方式实现跨域

使用webConfig配置跨域时，Methods和Headers不能切记不能用*，CORS方式中可以用*是因为内部做了处理

解决跨域问题的本质就是在响应中输出以上四个自定义响应头，因此可以用任何能够改变响应头的方式来处理

跨域请求都会有一个预检过程即发送一个Options请求，预检过后才会发送真正的请求，因此通过Chrome调试会发现发送了两次请求，这是正常现象哦！

2.WEB API 路由规则

Web API的路由规则是很多新手小伙伴容易出错的地方，这里给大家提几点重要的信息，更详细的内容请个人参照官网。

https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/web-api-routing-and-actions/routing-and-action-selection

1.Web Api 的Action 匹配与Http请求方法有关，下面是3个匹配规则：

1.使用Attribute来显示指定 HTTP 方法：AcceptVerbs， HttpDelete， HttpGet， HttpHead， HttpOptions， HttpPatch， HttpPost，或HttpPut。

2.若未指定http方法，则根据action方法名确定。若以"Get"、"Post"、"Put"、"Delete"、"Head"、"Options"或"Path"开头，则依次支持对应的 HTTP 方法。

3.如果不匹配上述任何规则，则该Action支持 POST方法。

注：1.当小伙伴会遇到进不到断点的情况，请仔细判断请求到了哪个Action

2.尽量不要存在同时支持某个HttpMethod的方法

3.前端请求遇到405时，请检查Action是否支持当前请求的Http方法

3.Ajax bug

许多小伙伴时不时会遇到Ajax响应200但是不进Success的问题。这里给大家总结一下，响应200说明ajax请求已经正常完成,进error的原因很大可能是因为服务端响应的数据，无法跟指定的dataType进行转换。这是只需要检查两个地方，dataType是否设置正确，响应的数据是否与改类型匹配。典型错误就是，服务端响应的是xml或者text但是dataType却设置为Json。

4.部署支持http Put 和 Delete方法

IIS7.5默认不支持HTTP Put和Delete请求，在使用Put或Delete请求是会受到405的响应。需要在配置文件中做以下配置

 <system.webServer> 
 <handlers> 
 <!--解决iis7.5报405的错误--> 
 <remove name="WebDAV" /> 
 <!--跨域请求时再考虑是否去除--> 
 <!--此handler不能注释,注释后会导致无法发送Put、Delete--> 
 <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
 <remove name="OPTIONSVerbHandler" /> 
 <remove name="TRACEVerbHandler" /> 
 <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
 </handlers> 
 <modules> 
 <!--解决iis7.5报405的错误--> 
 <remove name="WebDAVModule" /> 
 </modules> 
 </system.webServer>

ASP.Net Web API（.Net Framework）前后端分离——填坑指南

以上便是今天跟大家分享的内容，如果有疑问的话，请私信或留言！谢谢