為了說明跨請求，創建了兩個項目，一個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的結果");

運行結果

總結

以上是生活随笔為你收集整理的.NET6之MiniAPI(十四)：跨域CORS（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。