当前位置：网站首页>.NET6之MiniAPI(十四)：跨域CORS（上）

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

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

　　为了说明跨请求，创建了两个项目，一个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();
      
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三种方法，也可允许全部方法访问。

       
       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

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

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

运行结果

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

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

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

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://blog.51cto.com/axzxs/5542062

当前位置：网站首页>.NET6之MiniAPI(十四)：跨域CORS（上）

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

边栏推荐

猜你喜欢

随机推荐