前一篇的跨域請求的方式是松寬的方式，畢竟跨域有安全風險，應盡量少的允許訪問必要資源，本篇分別從請求方法，請求頭和請求憑據方面了解跨域設置。

請求方法：

api項目，get，post是默認訪問，這里只設置了PUT允許訪問

using Microsoft.AspNetCore.Cors;var builder = WebApplication.CreateBuilder(args);builder.Services.AddCors(options => {options.AddPolicy(name:?"Policy2",builder =>{builder.WithOrigins("http://localhost:5280").WithMethods("PUT");}); }); var?app?=?builder.Build(); //注意，這里是沒有策略名稱的 app.UseCors(); app.MapGet("/test2", [EnableCors("Policy2")] () => "get的結果"); app.MapPost("/test2", [EnableCors("Policy2")] () => "post的結果"); app.MapDelete("/test2", [EnableCors("Policy2")] () => "delete的結果"); app.MapPut("/test2", [EnableCors("Policy2")] () => "put的結果"); app.Map("/test2", [EnableCors("Policy2")] () => "map全部"); app.Run();

頁面項目：

@page @model IndexModel @{ViewData["Title"] = "Home page"; } <div class="text-center"><h1 class="display-4">歡迎學習MiniAPI</h1><p>本例是跨域知識的分享。</p> </div> <p?id="test2-get"></p> <p?id="test2-post"></p> <p?id="test2-delete"></p> <p?id="test2-put"></p> @section?Scripts{ <script>$(function(){$.ajax({url: 'http://localhost:5001/test2',type: 'GET',}).done(function( data, textStatus, jqXHR ) {$("#test2-get").html("test2 get:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test2-get").html("test2 get:"+textStatus)});$.ajax({url: 'http://localhost:5001/test2',type: 'POST',}).done(function( data, textStatus, jqXHR ) {$("#test2-post").html("test2:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test2-post").html("test2:"+textStatus)});$.ajax({url: 'http://localhost:5001/test2',type: 'DELETE',}).done(function( data, textStatus, jqXHR ) {$("#test2-delete").html("test2 delete:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test2-delete").html("test2 detele:"+textStatus)});$.ajax({url: 'http://localhost:5001/test2',type: 'PUT',}).done(function( data, textStatus, jqXHR ) {$("#test2-put").html("test2 put:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test2-put").html("test2 put:"+textStatus)});}); </script> }

運行結果，delete被拒了

請求Header

api項目，設置是所有請求方法通過

using Microsoft.AspNetCore.Cors;var?builder?=?WebApplication.CreateBuilder(args); builder.Services.AddCors(options => {options.AddPolicy(name: "Policy3",builder =>{builder.WithOrigins("http://localhost:5280").WithHeaders("x-cors-header").AllowAnyMethod();});??? });var?app?=?builder.Build(); app.UseCors(); app.MapGet("/test3", [EnableCors("Policy3")] () => "get的結果"); app.MapPost("/test3", [EnableCors("Policy3")] () => "post的結果"); app.MapDelete("/test3", [EnableCors("Policy3")] () => "delete的結果"); app.MapPut("/test3", [EnableCors("Policy3")] () => "put的結果"); app.Map("/test3",?[EnableCors("Policy3")]?()?=>?"map全部"); app.Run();

頁面項目

@page @model IndexModel @{ViewData["Title"] = "Home page"; } <div class="text-center"><h1 class="display-4">歡迎學習MiniAPI</h1><p>本例是跨域知識的分享。</p> </div> <p id="test3-get"></p> <p id="test3-post"></p> <p id="test3-delete"></p> <p?id="test3-put"></p> @section Scripts{ <script>$(function(){$.ajax({url: 'http://localhost:5001/test3',type: 'GET',headers: {"x-cors-header":"gsw"}}).done(function( data, textStatus, jqXHR ) {$("#test3-get").html("test3 get:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test3-get").html("test3 get:"+textStatus)});$.ajax({url: 'http://localhost:5001/test3',type: 'POST',headers: {"x-cors-header":"gsw"}}).done(function( data, textStatus, jqXHR ) {$("#test3-post").html("test3 post:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test3-post").html("test3 post:"+textStatus)});$.ajax({url: 'http://localhost:5001/test3',type: 'PUT',headers: {"x-cors-header":"gsw"}}).done(function( data, textStatus, jqXHR ) {$("#test3-put").html("test3 put:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test3-put").html("test3 put:"+textStatus)});$.ajax({url: 'http://localhost:5001/test3',type: 'DELETE',headers: {"x-cors-header":"gsw", "x-key":"gsw",??????????????????}}).done(function( data, textStatus, jqXHR ) {$("#test3-delete").html("test3 delete:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test3-delete").html("test3 delete:"+textStatus)});????????????????????}); </script> }

運行結果，delete失敗了，因為在delete請求中，夾帶了x-key的header，所以沒有通過

請求憑據

憑據需要在 CORS 請求中進行特殊處理。?默認情況下，瀏覽器不會使用跨域請求發送憑據。?憑據包括 cookie s 和 HTTP 身份驗證方案。?若要使用跨域請求發送憑據，客戶端必須設置 XMLHttpRequest.withCredentials 為 true

api項目

using Microsoft.AspNetCore.Cors;var builder = WebApplication.CreateBuilder(args); builder.Services.AddCors(options?=> {??options.AddPolicy(name: "Policy4",builder =>{builder.WithOrigins("http://localhost:5280").AllowCredentials().AllowAnyMethod();}); }); var?app?=?builder.Build(); app.UseCors(); app.MapGet("/test4", [EnableCors("Policy4")] () => "get的結果"); app.MapPost("/test4", [EnableCors("Policy4")] () => "post的結果"); app.MapDelete("/test4", [EnableCors("Policy4")] () => "delete的結果"); app.MapPut("/test4", [EnableCors("Policy4")] () => "put的結果"); app.Map("/test4", [EnableCors("Policy4")] () => "map全部"); app.Run();

頁面項目：

@page @model IndexModel @{ViewData["Title"] = "Home page"; } <div class="text-center"><h1 class="display-4">歡迎學習MiniAPI</h1><p>本例是跨域知識的分享。</p> </div> <p?id="test4-get"></p> <p?id="test4-post"></p> <p?id="test4-delete"></p> <p?id="test4-put"></p> @section Scripts{ <script>$(function(){$.ajax({url: 'http://localhost:5001/test4',type: 'GET',xhrFields: {withCredentials: true}}).done(function( data, textStatus, jqXHR ) {$("#test4-get").html("test4 get:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test4-get").html("test4 get:"+textStatus)});$.ajax({url: 'http://localhost:5001/test4',type: 'POST',xhrFields: {withCredentials: true}}).done(function( data, textStatus, jqXHR ) {$("#test4-post").html("test4 post:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test4-post").html("test4 post:"+textStatus)});$.ajax({url: 'http://localhost:5001/test4',type: 'PUT',xhrFields: {withCredentials: true}}).done(function( data, textStatus, jqXHR ) {$("#test4-put").html("test4 put:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test4-put").html("test4 put:"+textStatus)});$.ajax({url: 'http://localhost:5001/test4',type: 'DELETE',xhrFields: {withCredentials: true}}).done(function( data, textStatus, jqXHR ) {$("#test4-delete").html("test4 delete:"+data)}).fail(function( jqXHR, textStatus, errorThrown) {$("#test4-delete").html("test4 delete:"+textStatus)});}); </script> }

運行結果：

如果除掉api項目中的憑據

options.AddPolicy(name: "Policy4",builder =>{builder.WithOrigins("http://localhost:5280")???????????????.AllowAnyMethod();});

運行結果：

總結

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

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