.netWebAPI后台跨域问题解决

原文地址：https://blog.csdn.net/weixin_44295783/article/details/112120761

什么是跨域问题？
  客户端使用不被允许的源（域名/端口/协议）访问服务程序时，浏览器会自动拦截该请求。而在.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实现跨域
1
使用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（配置文件）中配置
在<system.webServer>内添加

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="*"/>
<add name="Access-Control-Allow-Methods" value="*" />
</customHeaders>
</httpProtocol>

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官方文档对跨域问题的说明。
————————————————
版权声明：本文为CSDN博主「AronZhx」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44295783/article/details/112120761