[WebApi]WebApi 跨域问题解决方案：CORS
Posted 厦门德仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[WebApi]WebApi 跨域问题解决方案：CORS相关的知识，希望对你有一定的参考价值。
一、跨域问题的由来
同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求javascript或Cookie只能访问同域下的内容。
正是由于这个原因，我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景：WebApi作为数据服务层，它是一个单独的项目，我们的MVC项目作为Web的显示层，这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目，所以运行起来之后就存在上面说的跨域的问题。
二、跨域问题解决原理
CORS全称Cross-Origin Resource Sharing，中文全称跨域资源共享。它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求。比如我们向响应报文里面增加这个Access-Control-Allow-Origin:http://localhost:8081，就表示支持http://localhost:8081里面的所有请求访问系统资源。其他更多的应用我们就不一一列举，可以去网上找找。
三、跨域问题解决细节
下面我就结合一个简单的实例来说明下如何使用CORS解决WebApi的跨域问题
我们新建两个项目，一个WebApi项目（下图中ZettlercnMIS.Api），一个Asp.net Core MVC项目（下图中Web ZettlercnMIS.WebUI）。WebApi项目负责提供接口服务，MVC项目负责页面呈现。如下：
其中，ZettlercnMIS.WebUI与ZettlercnMIS.Api端口号分别为“36627”和“57189”。Web项目需要从ZettlercnMIS.Api项目里面取数据，很显然，两个项目端口不同，所以并不同源，如果使用常规的调用方法肯定存在一个跨域的问题。
简单介绍下测试代码，Web里面有一个HomeController
public IActionResult Index()
return View();
对应的Index.cshtml
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
<script>
var url = "http://localhost:57189/api/Contact/GetListBySex?sex=%E7%94%B7";
$(document).ready(function ()
$("button").click(function ()
$.post(url,
sex: "男"
,
function (data, status)
alert("数据：" + data + "\\n状态：" + status);
);
);
);
</script>
<body>
<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>
</body>
ZettlercnMIS.Api项目里面有一个测试的WebApi服务ContactController
[HttpPost]
[Route("GetListBySex")]
public ActionResult<IEnumerable<Contact>> GetListBySex(string sex)
return contacts.Where(item => item.Sex == sex).ToList();
配置WebUI的路由规则为通过action调用
app.UseEndpoints(endpoints =>
endpoints.MapControllerRoute(
name: "default",
pattern: "controller=Home/action=Index/id?");
);
2、场景测试
1）我们不做任何的处理，直接将两个项目运行起来。看效果如何
2）使用CORS跨域
首先介绍下CORS如何使用，在WebApiCORS项目上面使用Nuget搜索“microsoft.aspnet.webapi.cors”，安装第一个
//添加cors 服务 配置跨域处理
services.AddCors(options =>
options.AddPolicy("Domain", builder =>
builder.WithMethods("GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS")
//.AllowCredentials()//指定处理cookie
.AllowAnyOrigin(); //允许任何来源的主机访问
);
);
app.UseCors(“Domain”);
如果你只想对某一些api做跨域，可以直接在API的类上面使用特性标注即可。
[EnableCors(origins: "http://localhost:8081/", headers: "*", methods: "GET,POST,PUT,DELETE")]
public class ContactController : ControllerBase
/// <summary>
/// 得到所有数据
/// </summary>
/// <returns>返回数据</returns>
[HttpGet]
public string GetAllXXX()
return "Success";
以上是关于[WebApi]WebApi 跨域问题解决方案：CORS的主要内容，如果未能解决你的问题，请参考以下文章