asp.net前后端分离吗,asp net前后端分离

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

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

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

跨域问题典型提示

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

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

配置如下：

安装Nuget包：Microsoft.AspNet.WebAPI.Cors

/// <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>

通过WebConfig配置跨域

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

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

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

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

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方法

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

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>

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