当前位置：网站首页>MiniAPI of .NET6 (14): Cross-domain CORS (Part 1)

MiniAPI of .NET6 (14): Cross-domain CORS (Part 1)

2022-08-03 22:25:00 【51CTO】

　　To illustrate cross-requests,创建了两个项目,一个mini api,端口是5001,另一个razor page项目,端口是5280.5280The item will be used on the pageajax的方式来请求5001,Form a cross-domain request,由于是本地测试,host都是localhost,So by port number is different,form different domains.

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();
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

页面项目

       
       @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>
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

运行结果：

.NET6之MiniAPI(十四)：跨域CORS（上）_跨域访问

　　默认情况下,只允许get,post,head三种方法,It is also possible to allow all method access.

       
       builder.Services.AddCors(options =>
       
{
       
    options.AddPolicy(name: "Policy1",
       
            builder =>
       
            {
       
                builder
       
                .WithOrigins("http://localhost:5280")               
       
                .AllowAnyMethod()
       
                .AllowAnyHeader()
       
                ;
       
            });
       
});
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

运行结果：

.NET6之MiniAPI(十四)：跨域CORS（上）_ajax_02

　　All open cross-domain access,配置简单,但安全性较低,If you need to disable some resources that do not need to be accessed,可以在对应的url上放置DisableCors特性,To control cross-domain access.

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

运行结果

.NET6之MiniAPI(十四)：跨域CORS（上）_ajax_03

　　想要更快更方便的了解相关知识,可以关注微信公众号

.NET6之MiniAPI(十四)：跨域CORS（上）_html_04

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/215/202208032216389408.html

当前位置：网站首页>MiniAPI of .NET6 (14): Cross-domain CORS (Part 1)

MiniAPI of .NET6 (14): Cross-domain CORS (Part 1)

边栏推荐

猜你喜欢

随机推荐