ASP.Net Core Web API解决跨域问题

一、跨域问题的原由

跨域问题是由浏览器的同源策略引起的，是指协议、域名、端口有一个不一样，那么就形成了跨域。更详细的介绍可以参考jQuery jsonp跨域请求。

二、跨域问题的解决

1、使用JSONP

JSONP是通过使用特殊的HTML标记来请求跨域资源的，适用于前端开发。可以参考jQuery jsonp跨域请求。

2、后台模拟HTTP请求

将跨域问题转移到服务端处理，在服务端请求不同源的API接口。

public class HomeController : Controller
{
    [HttpGet]
    public string GetCrossDomainData()
    {
        return InvokeApi("http://localhost:5000/api/crossdomain/getdata");
    }

    private static string InvokeApi(string url)
    {
        using (var httpClient = new HttpClient())
        {
            var message = new HttpRequestMessage()
            {
                Method = HttpMethod.Get,
                RequestUri = new Uri(url)
            };
            var result = httpClient.SendAsync(message).Result;
            var content = result.Content.ReadAsStringAsync().Result;
            return content;
        }
    }
}

3、在服务器端指定允许跨域

(1) 在控制器API中允许跨域

[HttpGet]
[Route("GetData")]
public IActionResult GetData()
{
    //允许跨域请求
    HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
    
    return new JsonResult(new
    {
        Id = "100",
        Data = "CrossDomainData"
    });
}

(2) 使用IActionFilter标记允许跨域

可以在API方法或者控制器中使用IActionFilter标记，前者仅对当前方法生效，后者对整个控制器的方法都生效。

public class CrossDomainActionFilterAttribute : Attribute, IActionFilter
{
    public void OnActionExecuting(ActionExecutingContext context)
    {
        //允许跨域请求
        context.HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
    }

    public void OnActionExecuted(ActionExecutedContext context)
    {
    }
}

[HttpGet]
[Route("GetData")]
[CrossDomainActionFilterAttribute]
public IActionResult GetData()
{
    //允许跨域请求
    //HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
    
    return new JsonResult(new
    {
        Id = "100",
        Data = "CrossDomainData"
    });
}

[Route("api/[controller]")]
[ApiController]
[CrossDomainActionFilter]
public class CrossDomainController : ControllerBase
{
}

4、使用CORS中间件

CORS中间件是微软提供的跨域支持类库，可使用Nuget引入Microsoft.AspNetCore.Cors类库。

(1) 注册跨域请求服务

//注册跨域请求CORS服务
services.AddCors(options =>
{
    options.AddPolicy("AllowCors", builder =>
    {
        builder.AllowAnyOrigin().AllowAnyMethod();
    });
});

(2) 启用Cors中间件

//启用Cors中间件
app.UseCors("AllowCors");