.netWebAPI后台跨域问题解决

什么是跨域问题？

客户端使用不被允许的源（域名/端口/协议）访问服务程序时，浏览器会自动拦截该请求。而在.net+VS开发中，后端程序的调试经常使用的是localhost<端口号>的一个本地端口，在配置中也是默认只允许该域名端口访问。所以，在前后端分离开发时，如果前端使用了如React以及Vue等调试时会使用独立端口的框架，就可能出现跨域问题。

图片中的（1）是后台程序的域名端口，（2）是前端框架的域名端口，（3）是后台web.config中允许访问的一个域名端口（可以忽略），（4）就是出现跨域问题时浏览器中的报错。XXX has been blocked by CORS policy;CORS是跨域资源共享(Cross Origin Resource Sharing)， CORS policy 就是跨域资源共享策略，它与同源策略功能一样，都是出于安全考虑，拦截非允许源的访问。所以解决该问题，我们后台要做的，就是添加允许访问的源。

.netWebApi跨域设置

在这里，我们是用CORS实现跨域

使用NuGet安装Microsoft.AspNet.WebApi.Cors
在在App_Start（MVC项目中就是_Start那个文件夹）文件夹下面的WebApiConfig.cs文件夹配置跨域

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            //跨域配置
            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

            // Web API 路由
            config.MapHttpAttributeRoutes();
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

进行测试，如果还是不行，设置浏览器为可跨域（方法自行百度）。如果报错提示有多个跨域设置，检查web.config文件是否存在其他的跨域配置，然后保留一个就可。

CORS具体设置

config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 这样的写法是个程序员就知道不安全，所以我们应该根据需要设置具体参数。这里我们提供三种方法。

1·WebApiConfig.cs中设置

这个方法就是上面使用的方法，就是从专业角度来讲有点临时，而且只能添加一次，按道理应该写在配置文件里，也就是测试的时候用。
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));三个字符串类型的参数按顺序分别是源（origins）、头部（headers）以及Http方法（methods）。举个栗子：[EnableCors(origins: "http://example.com", headers: "accept,content-type,origin,x-my-header", methods: "POST")]，如果写成"*"就表示任意都行。

2·在web.config（配置文件）中配置

在内添加

3·使用标签

在方法1中将config.EnableCors(new EnableCorsAttribute("*", "*", "*"));换为config.EnableCors();；然后在想设置跨域的地方（类或者方法）上加上[EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")](举个栗子)

using System.Web.Http;
namespace WebService
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // New code
            config.EnableCors();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace WebService.Controllers
{
    [EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }
}

Web API CORS 包是一种服务器端技术。用户的浏览器还需要支持 CORS。幸运的是，所有主流浏览器的当前版本都支持 CORS。如果想了解更多.net关于跨域的说明，请查阅.net官方文档对跨域问题的说明。

.netWebAPI后台跨域问题解决

.Net相关栏目本月热门文章