MiniAPI（十四）：CORSによるクロスオリジン（上）

[クロスリクエストを説明するために、2つのプロジェクトを作成しました。一つはmini apiで、ポート番号は5001、もう一つはrazor pageプロジェクトで、ポート番号は5280です。5280プロジェクトでは、ページ上でajaxを使用して5001にリクエストを送り、クロスオリジンリクエストを行います。ローカルテストであるため、ホストはすべてlocalhostであり、ポート番号が異なるため、異なるオリジンが形成されます。
apiプロジェクト
```C#
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();
```
ページプロジェクト
```html
@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 delete:"+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>
}
```
実行結果：
![alt画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRDC5YkU2W5hb5yYKtaT0fcGfKWJ0CqVNR2a2M4Hdu62HNyEguYibC0ia2GPxOfUMgPKOX8Fs1NsQk8Q/640?wx_fmt=png)
デフォルトでは、get、post、headの3つのメソッドのみが許可されていますが、すべてのメソッドにアクセスを許可することもできます。
```C#
builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "Policy1",
            builder =>
            {
                builder
                    .WithOrigins("http://localhost:5280")
                   .AllowAnyMethod()
                   .AllowAnyHeader()
                   ;
            });
});
```
実行結果：
![alt画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRDC5YkU2W5hb5yYKtaT0fcGicibvB2bsXPsq9SLI9SuWNcyvGAC0qQQhaezIe391cMHLk9cmCiadF19Q/640?wx_fmt=png)
すべてのクロスオリジンアクセスを開放すると、設定は簡単ですが、セキュリティが低下します。アクセスを制限したいリソースがある場合は、該当するURLにDisableCors属性を設置して、クロスオリジンアクセスを制御できます。
```C#
app.MapDelete("/test1", [DisableCors]() => "deleteの結果");
```
実行結果
![alt画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRDC5YkU2W5hb5yYKtaT0fcGqGE1WjudlkdCK4dnwt30bYNWCY1YiaJmbKqRVfUvgiaqW2bCzHA3zZKw/640?wx_fmt=png)]

(Translated by GPT)

元のリンク：https://mp.weixin.qq.com/s?__biz=MzA3NDM1MzIyMQ==&mid=2247484910&idx=1&sn=455141c0a358ce66568e846421cd0b40&chksm=9f005ac4a877d3d223cac0c69e8ab57b77c3b5665411aeea97e791820f9a59bec1dd8f9121c3&token=541757603&lang=zh_CN#rd