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");