.NET6之MiniAPI(十五)：跨域CORS（下）

前一篇的跨域请求的方式是松宽的方式，毕竟跨域有安全风险，应尽量少的允许访问必要资源，本篇分别从请求方法，请求头和请求凭据方面了解跨域设置。

请求方法：

api项目，get，post是默认访问，这里只设置了PUT允许访问

1.  
   using Microsoft.AspNetCore.Cors;
2.  
    
3.  
    
4.  
   var builder = WebApplication.CreateBuilder(args);
5.  
    
6.  
    
7.  
   builder.Services.AddCors(options =>
8.  
   {
9.  
       options.AddPolicy(name: "Policy2",
10.  
    builder =>
11.  
    {
12.  
    builder
13.  
    .WithOrigins("http://localhost:5280")
14.  
                        .WithMethods("PUT");
15.  
    });
16.  
    });
17.  
    var app = builder.Build();
18.  
    //注意，这里是没有策略名称的
19.  
    app.UseCors();
20.  
    app.MapGet("/test2", [EnableCors("Policy2")] () => "get的结果");
21.  
    app.MapPost("/test2", [EnableCors("Policy2")] () => "post的结果");
22.  
    app.MapDelete("/test2", [EnableCors("Policy2")] () => "delete的结果");
23.  
    app.MapPut("/test2", [EnableCors("Policy2")] () => "put的结果");
24.  
    app.Map("/test2", [EnableCors("Policy2")] () => "map全部");
25.  
    app.Run();

页面项目：

1.  
   @page
2.  
   @model IndexModel
3.  
   @{
4.  
   ViewData["Title"] = "Home page";
5.  
   }
6.  
   <div class="text-center">
7.  
   <h1 class="display-4">欢迎学习MiniAPI</h1>
8.  
   <p>本例是跨域知识的分享。</p>
9.  
   </div>
10.  
    <p id="test2-get"></p>
11.  
    <p id="test2-post"></p>
12.  
    <p id="test2-delete"></p>
13.  
    <p id="test2-put"></p>
14.  
    @section Scripts{
15.  
    <script>
16.  
          $(function(){
17.  
    $.ajax({
18.  
    url: 'http://localhost:5001/test2',
19.  
    type: 'GET',
20.  
    }).done(function( data, textStatus, jqXHR ) {
21.  
    $("#test2-get").html("test2 get:"+data)
22.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
23.  
    $("#test2-get").html("test2 get:"+textStatus)
24.  
    });
25.  
     
26.  
     
27.  
    $.ajax({
28.  
    url: 'http://localhost:5001/test2',
29.  
    type: 'POST',
30.  
    }).done(function( data, textStatus, jqXHR ) {
31.  
    $("#test2-post").html("test2:"+data)
32.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
33.  
    $("#test2-post").html("test2:"+textStatus)
34.  
    });
35.  
     
36.  
     
37.  
    $.ajax({
38.  
    url: 'http://localhost:5001/test2',
39.  
    type: 'DELETE',
40.  
    }).done(function( data, textStatus, jqXHR ) {
41.  
    $("#test2-delete").html("test2 delete:"+data)
42.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
43.  
    $("#test2-delete").html("test2 detele:"+textStatus)
44.  
    });
45.  
     
46.  
     
47.  
    $.ajax({
48.  
    url: 'http://localhost:5001/test2',
49.  
    type: 'PUT',
50.  
    }).done(function( data, textStatus, jqXHR ) {
51.  
    $("#test2-put").html("test2 put:"+data)
52.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
53.  
    $("#test2-put").html("test2 put:"+textStatus)
54.  
              });
55.  
    });
56.  
    </script>
57.  
    }

运行结果，delete被拒了

请求Header

api项目，设置是所有请求方法通过

1.  
   using Microsoft.AspNetCore.Cors;
2.  
    
3.  
    
4.  
   var builder = WebApplication.CreateBuilder(args);
5.  
   builder.Services.AddCors(options =>
6.  
   {
7.  
   options.AddPolicy(name: "Policy3",
8.  
   builder =>
9.  
   {
10.  
    builder.WithOrigins("http://localhost:5280")
11.  
    .WithHeaders("x-cors-header")
12.  
                    .AllowAnyMethod();
13.  
                });   
14.  
    });
15.  
     
16.  
     
17.  
    var app = builder.Build();
18.  
    app.UseCors();
19.  
    app.MapGet("/test3", [EnableCors("Policy3")] () => "get的结果");
20.  
    app.MapPost("/test3", [EnableCors("Policy3")] () => "post的结果");
21.  
    app.MapDelete("/test3", [EnableCors("Policy3")] () => "delete的结果");
22.  
    app.MapPut("/test3", [EnableCors("Policy3")] () => "put的结果");
23.  
    app.Map("/test3", [EnableCors("Policy3")] () => "map全部");
24.  
    app.Run();

页面项目

1.  
   @page
2.  
   @model IndexModel
3.  
   @{
4.  
   ViewData["Title"] = "Home page";
5.  
   }
6.  
   <div class="text-center">
7.  
   <h1 class="display-4">欢迎学习MiniAPI</h1>
8.  
   <p>本例是跨域知识的分享。</p>
9.  
   </div>
10.  
    <p id="test3-get"></p>
11.  
    <p id="test3-post"></p>
12.  
    <p id="test3-delete"></p>
13.  
    <p id="test3-put"></p>
14.  
    @section Scripts{
15.  
    <script>
16.  
          $(function(){
17.  
    $.ajax({
18.  
    url: 'http://localhost:5001/test3',
19.  
    type: 'GET',
20.  
    headers: {
21.  
    "x-cors-header":"gsw"
22.  
    }
23.  
    }).done(function( data, textStatus, jqXHR ) {
24.  
    $("#test3-get").html("test3 get:"+data)
25.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
26.  
    $("#test3-get").html("test3 get:"+textStatus)
27.  
    });
28.  
     
29.  
     
30.  
    $.ajax({
31.  
    url: 'http://localhost:5001/test3',
32.  
    type: 'POST',
33.  
    headers: {
34.  
    "x-cors-header":"gsw"
35.  
    }
36.  
    }).done(function( data, textStatus, jqXHR ) {
37.  
    $("#test3-post").html("test3 post:"+data)
38.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
39.  
    $("#test3-post").html("test3 post:"+textStatus)
40.  
    });
41.  
     
42.  
     
43.  
    $.ajax({
44.  
    url: 'http://localhost:5001/test3',
45.  
    type: 'PUT',
46.  
    headers: {
47.  
    "x-cors-header":"gsw"
48.  
    }
49.  
    }).done(function( data, textStatus, jqXHR ) {
50.  
    $("#test3-put").html("test3 put:"+data)
51.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
52.  
    $("#test3-put").html("test3 put:"+textStatus)
53.  
    });
54.  
     
55.  
     
56.  
    $.ajax({
57.  
    url: 'http://localhost:5001/test3',
58.  
    type: 'DELETE',
59.  
    headers: {
60.  
    "x-cors-header":"gsw",
61.  
                     "x-key":"gsw",                  
62.  
    }
63.  
    }).done(function( data, textStatus, jqXHR ) {
64.  
    $("#test3-delete").html("test3 delete:"+data)
65.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
66.  
    $("#test3-delete").html("test3 delete:"+textStatus)
67.  
              });                    
68.  
    });
69.  
    </script>
70.  
    }

运行结果，delete失败了，因为在delete请求中，夹带了x-key的header，所以没有通过

请求凭据

凭据需要在 CORS 请求中进行特殊处理。 默认情况下，浏览器不会使用跨域请求发送凭据。 凭据包括 cookie s 和 HTTP 身份验证方案。 若要使用跨域请求发送凭据，客户端必须设置 XMLHttpRequest.withCredentials 为 true

api项目

1.  
   using Microsoft.AspNetCore.Cors;
2.  
    
3.  
    
4.  
   var builder = WebApplication.CreateBuilder(args);
5.  
   builder.Services.AddCors(options =>
6.  
   {  
7.  
   options.AddPolicy(name: "Policy4",
8.  
   builder =>
9.  
   {
10.  
    builder.WithOrigins("http://localhost:5280")
11.  
    .AllowCredentials()
12.  
                    .AllowAnyMethod();
13.  
    });
14.  
    });
15.  
    var app = builder.Build();
16.  
    app.UseCors();
17.  
    app.MapGet("/test4", [EnableCors("Policy4")] () => "get的结果");
18.  
    app.MapPost("/test4", [EnableCors("Policy4")] () => "post的结果");
19.  
    app.MapDelete("/test4", [EnableCors("Policy4")] () => "delete的结果");
20.  
    app.MapPut("/test4", [EnableCors("Policy4")] () => "put的结果");
21.  
    app.Map("/test4", [EnableCors("Policy4")] () => "map全部");
22.  
    app.Run();

页面项目：

1.  
   @page
2.  
   @model IndexModel
3.  
   @{
4.  
   ViewData["Title"] = "Home page";
5.  
   }
6.  
   <div class="text-center">
7.  
   <h1 class="display-4">欢迎学习MiniAPI</h1>
8.  
   <p>本例是跨域知识的分享。</p>
9.  
   </div>
10.  
    <p id="test4-get"></p>
11.  
    <p id="test4-post"></p>
12.  
    <p id="test4-delete"></p>
13.  
    <p id="test4-put"></p>
14.  
    @section Scripts{
15.  
    <script>
16.  
          $(function(){
17.  
    $.ajax({
18.  
    url: 'http://localhost:5001/test4',
19.  
    type: 'GET',
20.  
    xhrFields: {
21.  
    withCredentials: true
22.  
    }
23.  
    }).done(function( data, textStatus, jqXHR ) {
24.  
    $("#test4-get").html("test4 get:"+data)
25.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
26.  
    $("#test4-get").html("test4 get:"+textStatus)
27.  
    });
28.  
     
29.  
     
30.  
    $.ajax({
31.  
    url: 'http://localhost:5001/test4',
32.  
    type: 'POST',
33.  
    xhrFields: {
34.  
    withCredentials: true
35.  
    }
36.  
    }).done(function( data, textStatus, jqXHR ) {
37.  
    $("#test4-post").html("test4 post:"+data)
38.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
39.  
    $("#test4-post").html("test4 post:"+textStatus)
40.  
    });
41.  
     
42.  
     
43.  
    $.ajax({
44.  
    url: 'http://localhost:5001/test4',
45.  
    type: 'PUT',
46.  
    xhrFields: {
47.  
    withCredentials: true
48.  
    }
49.  
    }).done(function( data, textStatus, jqXHR ) {
50.  
    $("#test4-put").html("test4 put:"+data)
51.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
52.  
    $("#test4-put").html("test4 put:"+textStatus)
53.  
    });
54.  
     
55.  
     
56.  
    $.ajax({
57.  
    url: 'http://localhost:5001/test4',
58.  
    type: 'DELETE',
59.  
    xhrFields: {
60.  
    withCredentials: true
61.  
    }
62.  
    }).done(function( data, textStatus, jqXHR ) {
63.  
    $("#test4-delete").html("test4 delete:"+data)
64.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
65.  
    $("#test4-delete").html("test4 delete:"+textStatus)
66.  
              });
67.  
    });
68.  
    </script>
69.  
    }

运行结果：

如果除掉api项目中的凭据

1.  
   options.AddPolicy(name: "Policy4",
2.  
   builder =>
3.  
   {
4.  
                   builder.WithOrigins("http://localhost:5280")               
5.  
   .AllowAnyMethod()
6.  
   ;
7.  
   });

运行结果：