WebApi跨域问题

用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:\Users\liu\source\repos\Cros\jquery.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>等，不太熟，就不示例了，哈啊哈哈哈

posted @ 2020-04-20 11:03 青兰柳阅读(262) 评论(0) 编辑收藏举报

刷新页面返回顶部

WebApi跨域问题

公告