用net core 2.1写的WebApi，然后出现了前端调用不了，百度说是浏览器同源策略（浏览器会阻止一个域的js和另一个域的js进行交互）
然后写了一个测试用的WebApi，写了一个静态的html文件，打开发现是可以调用到WebApi中的方法的
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>跨域测试WebApi</title> </head> <body> 请求数据：<div id="result"></div> <script src="C:Usersliusource eposCrosjquery.min.js" charset="utf-8"></script> <script type="text/javascript"> $.ajax({ type: "Get", data: {}, url: "https://localhost:44342/api/CrosDomain/GetDomainData", success: function (result) { $("#result").text(result); } }) </script> </body> </html>
namespace CrosDomain.Controllers { [Route("api/[controller]")] [ApiController] public class CrosDomainController : ControllerBase { [HttpGet] [Route("GetDomainData")] public string GetDomainData() { return Newtonsoft.Json.JsonConvert.SerializeObject( new { id = 123, Name = "Gakki", Description = "这个Api就是专门用测试跨域问题的。。。" } ); } } }
但是没有数据返回，会在页面报错
接下来就是解决办法了
第一种：通过后台模拟Http请求Api,将获取数据返回给前端
首先新建一个mvc项目，然后在HomeController中添加一个方法
[Route("GetCrossDaminData")] public string GetCrossDaminData() { string url = "https://localhost:44342/api/CrosDomain/GetDomainData"; //WebApi启动时的地址 using (HttpClient httpClient = new HttpClient()) { HttpRequestMessage message = new HttpRequestMessage(); message.Method = HttpMethod.Get; message.RequestUri = new Uri(url); var result = httpClient.SendAsync(message).Result; string content = result.Content.ReadAsStringAsync().Result; return content; } }
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
</div>
请求数据：<div id="result"></div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script scr="" charset="utf-8"></script>
<script type="text/javascript">
$.ajax({
type: "Get",
data: {},
url: "GetCrossDaminData",
success: function (result) {
$("#result").html(result);
}
})
</script>
// 这个home对应的index视图
然后就出现下图，表示成功了
第二种 在服务端指定允许你跨域
在上面浏览器报错的有个提示 No 'Access-Control-Allow-Origin' header is present on the requested resourc
所以可以在webapi的GetDomainData方法中加上一句代码即可
base.HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
然后打开静态页面，就会显示数据了。
第三种 简单粗暴用中间件 用 Microsoft.AspNetCore.Cors包（可能版本有冲突，自行找合适的，我装的是Microsoft.AspNet.WebApi.Cors.tr v5.2.7）
然后再startup的ConfigureServices方法中注册服务
services.AddCors(option => option.AddPolicy("AllowCors", _build => _build.AllowAnyOrigin().AllowAnyMethod()));
在Configure添加到管道中
app.UseCors("AllowCors"); //这个名称和前面注册服务的名字要一致，可能还有中间件的顺序也有关系，如果没有数据，可以调换一下位置
然后打开静态页面也是一样的结构
跨域问题解决还有很多方法，比如前端的jsonp，用标签<frame>,<img><script>等，不太熟，就不示例了，哈啊哈哈哈