.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的结果");

运行结果

给TA打赏
共{{data.count}}人
人已打赏
.NET

.NET6之Mini API【十三、健康检查】

2022-7-4 11:03:02

.NET

.NET6 环境下实现MQTT通信,以及服务端、客户端的双边消息订阅与发布的代码演示

2022-7-4 11:26:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索