.NET6之Mini API【十四、跨域CORS（上）】

为了说明跨请求，创建了两个项目，一个mini api，端口是5001，另一个razor page项目，端口是5280。5280项目会在页面用ajax的方式来请求5001，形成跨域请求，由于是本地测试，host都是localhost，所以通过端口号不同，形成不同的域。

api项目

using Microsoft.AspNetCore.Cors;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "Policy1",
            builder =>
            {
                builder
                .WithOrigins("http://localhost:5280");
            });
});
var app = builder.Build();
app.UseCors("Policy1");
app.MapGet("/test1", () => "get的结果");
app.MapPost("/test1", () => "post的结果");
app.MapDelete("/test1", () => "delete的结果");
app.MapPut("/test1", () => "put的结果");
app.Run();

页面项目

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">欢迎学习MiniAPI</h1>
    <p>本例是跨域知识的分享。</p>
</div>
<p id="test1-get"></p>
<p id="test1-post"></p>
<p id="test1-delete"></p>
<p id="test1-put"></p>
@section Scripts{
<script>
      $(function(){
          $.ajax({
              url: 'http://localhost:5001/test1',
              type: 'GET',
          }).done(function( data, textStatus, jqXHR ) {
              $("#test1-get").html("test1 get:"+data)
          }).fail(function( jqXHR, textStatus, errorThrown) {
              $("#test1-get").html("test1 get:"+textStatus)
          });

          $.ajax({
              url: 'http://localhost:5001/test1',
              type: 'POST',
          }).done(function( data, textStatus, jqXHR ) {
              $("#test1-post").html("test1:"+data)
          }).fail(function( jqXHR, textStatus, errorThrown) {
              $("#test1-post").html("test1:"+textStatus)
          });

         $.ajax({
              url: 'http://localhost:5001/test1',
              type: 'DELETE',
          }).done(function( data, textStatus, jqXHR ) {
              $("#test1-delete").html("test1 delete:"+data)
          }).fail(function( jqXHR, textStatus, errorThrown) {
              $("#test1-delete").html("test1 detele:"+textStatus)
          });

         $.ajax({
              url: 'http://localhost:5001/test1',
              type: 'PUT',
          }).done(function( data, textStatus, jqXHR ) {
              $("#test1-put").html("test1 put:"+data)
          }).fail(function( jqXHR, textStatus, errorThrown) {
              $("#test1-put").html("test1 put:"+textStatus)
          });
      });
</script>
}

运行结果：

默认情况下，只允许get，post，head三种方法，也可允许全部方法访问。

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "Policy1",
            builder =>
            {
                builder
                .WithOrigins("http://localhost:5280")               
                .AllowAnyMethod()
                .AllowAnyHeader()
                ;
            });
});

运行结果：

全部开放跨域访问，配置简单，但安全性较低，如果需要禁用一些不需要访问的资源，可以在对应的url上放置DisableCors特性，要控制跨域访问。

app.MapDelete("/test1", [DisableCors]() => "delete的结果");

运行结果