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

请求方法:

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

  1.  
    using Microsoft.AspNetCore.Cors;
  2.  
    var builder = WebApplication.CreateBuilder(args);
  3.  
    builder.Services.AddCors(options =>
  4.  
    {
  5.  
        options.AddPolicy(name: "Policy2",
  6.  
    builder =>
  7.  
    {
  8.  
    builder
  9.  
    .WithOrigins("http://localhost:5280")
  10.  
                        .WithMethods("PUT");
  11.  
    });
  12.  
    });
  13.  
    var app = builder.Build();
  14.  
    //注意,这里是没有策略名称的
  15.  
    app.UseCors();
  16.  
    app.MapGet("/test2", [EnableCors("Policy2")] () => "get的结果");
  17.  
    app.MapPost("/test2", [EnableCors("Policy2")] () => "post的结果");
  18.  
    app.MapDelete("/test2", [EnableCors("Policy2")] () => "delete的结果");
  19.  
    app.MapPut("/test2", [EnableCors("Policy2")] () => "put的结果");
  20.  
    app.Map("/test2", [EnableCors("Policy2")] () => "map全部");
  21.  
    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.  
    $.ajax({
  26.  
    url: 'http://localhost:5001/test2',
  27.  
    type: 'POST',
  28.  
    }).done(function( data, textStatus, jqXHR ) {
  29.  
    $("#test2-post").html("test2:"+data)
  30.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  31.  
    $("#test2-post").html("test2:"+textStatus)
  32.  
    });
  33.  
    $.ajax({
  34.  
    url: 'http://localhost:5001/test2',
  35.  
    type: 'DELETE',
  36.  
    }).done(function( data, textStatus, jqXHR ) {
  37.  
    $("#test2-delete").html("test2 delete:"+data)
  38.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  39.  
    $("#test2-delete").html("test2 detele:"+textStatus)
  40.  
    });
  41.  
    $.ajax({
  42.  
    url: 'http://localhost:5001/test2',
  43.  
    type: 'PUT',
  44.  
    }).done(function( data, textStatus, jqXHR ) {
  45.  
    $("#test2-put").html("test2 put:"+data)
  46.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  47.  
    $("#test2-put").html("test2 put:"+textStatus)
  48.  
              });
  49.  
    });
  50.  
    </script>
  51.  
    }

运行结果,delete被拒了

.NET6之MiniAPI(十五):跨域CORS(下)_html

请求Header

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

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

.NET6之MiniAPI(十五):跨域CORS(下)_html_02

页面项目

  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.  
    $.ajax({
  29.  
    url: 'http://localhost:5001/test3',
  30.  
    type: 'POST',
  31.  
    headers: {
  32.  
    "x-cors-header":"gsw"
  33.  
    }
  34.  
    }).done(function( data, textStatus, jqXHR ) {
  35.  
    $("#test3-post").html("test3 post:"+data)
  36.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  37.  
    $("#test3-post").html("test3 post:"+textStatus)
  38.  
    });
  39.  
    $.ajax({
  40.  
    url: 'http://localhost:5001/test3',
  41.  
    type: 'PUT',
  42.  
    headers: {
  43.  
    "x-cors-header":"gsw"
  44.  
    }
  45.  
    }).done(function( data, textStatus, jqXHR ) {
  46.  
    $("#test3-put").html("test3 put:"+data)
  47.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  48.  
    $("#test3-put").html("test3 put:"+textStatus)
  49.  
    });
  50.  
    $.ajax({
  51.  
    url: 'http://localhost:5001/test3',
  52.  
    type: 'DELETE',
  53.  
    headers: {
  54.  
    "x-cors-header":"gsw",
  55.  
                     "x-key":"gsw",                  
  56.  
    }
  57.  
    }).done(function( data, textStatus, jqXHR ) {
  58.  
    $("#test3-delete").html("test3 delete:"+data)
  59.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  60.  
    $("#test3-delete").html("test3 delete:"+textStatus)
  61.  
              });                    
  62.  
    });
  63.  
    </script>
  64.  
    }

.NET6之MiniAPI(十五):跨域CORS(下)_html_02

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

.NET6之MiniAPI(十五):跨域CORS(下)_html_04

请求凭据


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


api项目

  1.  
    using Microsoft.AspNetCore.Cors;
  2.  
    var builder = WebApplication.CreateBuilder(args);
  3.  
    builder.Services.AddCors(options =>
  4.  
    {  
  5.  
    options.AddPolicy(name: "Policy4",
  6.  
    builder =>
  7.  
    {
  8.  
    builder.WithOrigins("http://localhost:5280")
  9.  
    .AllowCredentials()
  10.  
                    .AllowAnyMethod();
  11.  
    });
  12.  
    });
  13.  
    var app = builder.Build();
  14.  
    app.UseCors();
  15.  
    app.MapGet("/test4", [EnableCors("Policy4")] () => "get的结果");
  16.  
    app.MapPost("/test4", [EnableCors("Policy4")] () => "post的结果");
  17.  
    app.MapDelete("/test4", [EnableCors("Policy4")] () => "delete的结果");
  18.  
    app.MapPut("/test4", [EnableCors("Policy4")] () => "put的结果");
  19.  
    app.Map("/test4", [EnableCors("Policy4")] () => "map全部");
  20.  
    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.  
    $.ajax({
  29.  
    url: 'http://localhost:5001/test4',
  30.  
    type: 'POST',
  31.  
    xhrFields: {
  32.  
    withCredentials: true
  33.  
    }
  34.  
    }).done(function( data, textStatus, jqXHR ) {
  35.  
    $("#test4-post").html("test4 post:"+data)
  36.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  37.  
    $("#test4-post").html("test4 post:"+textStatus)
  38.  
    });
  39.  
    $.ajax({
  40.  
    url: 'http://localhost:5001/test4',
  41.  
    type: 'PUT',
  42.  
    xhrFields: {
  43.  
    withCredentials: true
  44.  
    }
  45.  
    }).done(function( data, textStatus, jqXHR ) {
  46.  
    $("#test4-put").html("test4 put:"+data)
  47.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  48.  
    $("#test4-put").html("test4 put:"+textStatus)
  49.  
    });
  50.  
    $.ajax({
  51.  
    url: 'http://localhost:5001/test4',
  52.  
    type: 'DELETE',
  53.  
    xhrFields: {
  54.  
    withCredentials: true
  55.  
    }
  56.  
    }).done(function( data, textStatus, jqXHR ) {
  57.  
    $("#test4-delete").html("test4 delete:"+data)
  58.  
    }).fail(function( jqXHR, textStatus, errorThrown) {
  59.  
    $("#test4-delete").html("test4 delete:"+textStatus)
  60.  
              });
  61.  
    });
  62.  
    </script>
  63.  
    }

运行结果:

.NET6之MiniAPI(十五):跨域CORS(下)_跨域_05

如果除掉api项目中的凭据

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

运行结果:

.NET6之MiniAPI(十五):跨域CORS(下)_html_06