常連

### 実現したいこと
開発環境においてCORSエラーを回避したい

### 発生している問題・分からないこと
Angular, ASP.NET Core Web API, Keycloakを用いたSAML2認証を組み合わせたアプリケーションにおいてCORSのエラーが発生しています。どうすれば回避できるのでしょうか?

エラーメッセージ中の以下のアドレスは次に対応します。
https://localhost:4200 : フロントエンド側(Angular)のアドレス
https://localhost:7055 : バックエンド側(ASP.NET Core Web API)のアドレス
https://localhost:8443 : Keycloakのアドレス


### エラーメッセージ
```error
Access to XMLHttpRequest at 'https://localhost:8443/realms/(realm name)/protocol/saml?SAMLRequest=fJFNa8MwDIbvhf4H43tnx%2FloKpJAWBkUukuz7rCbk7ok4NiZ5ezj3y%2Ft2rHB6EUHSY%2F0vlKGstdigHL0rdmp11GhJx%2B9NgjflZyOzoCV2CEY2SsE30BVPm5B3HEYnPW2sZr%2BZm4jElE531lDyWad0%2B5QcyGSY5MeQnWMgiCp64Qn6TJK60REqyCg5Fk5nICcTvxEIY5qY9BL46cUF9GCrxY8eQo4xCEE4oWS9WSjM%2FK0Jqet9wMCY9o2UrcWPaRRFDKnpO6RVZ%2F4oO07u1phJw%2BUlFeZ99bg2CtXKffWNWq%2F2%2F43ccnjmFUn95dYNkiL%2BYyQ7HwTOKt2xS0yO6%2F%2BaZ3PLom%2F3ym%2BAAAA%2F%2F8DAA%3D%3D&RelayState=fHLe6EsBVGLe6Gh3cn9mzROQ' (redirected from 'https://localhost:7055/account/UserInfo') from origin 'https://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

### 該当のソースコード

```Program.cs(前半部分)

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddLogging(loggingBuilder =>
{
    loggingBuilder.AddConsole();
    loggingBuilder.AddDebug();
    loggingBuilder.SetMinimumLevel(LogLevel.Debug);
});

#if DEBUG
// CORSの有効化(開発時のみ)
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("https://localhost:4200", "https://localhost:8443")
            .AllowAnyHeader()
            .AllowAnyMethod();
        });
});
#endif

// Add services to the container.

// 分散キャッシュの設定
builder.Services.AddDistributedPostgreSqlCache(options =>
{
    options.ConnectionString = builder.Configuration.GetConnectionString("FlowDb");
    options.SchemaName = "public";
    options.TableName = "TestCache";
    options.DisableRemoveExpired = false;
    options.ExpiredItemsDeletionInterval = TimeSpan.FromMinutes(30);
});

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = Saml2Defaults.Scheme;
})
.AddCookie()
.AddSaml2(options =>
{
    var entityId = builder.Configuration["Saml2:entityId"];
    var idpEntityId = builder.Configuration["Saml2:idpEntityId"];
    var metadataUrl = builder.Configuration["Saml2:IdpMetadataURL"];

    options.SPOptions.EntityId = new Sustainsys.Saml2.Metadata.EntityId(entityId);
    options.SPOptions.AuthenticateRequestSigningBehavior = Sustainsys.Saml2.Configuration.SigningBehavior.Never;
    options.SPOptions.PublicOrigin = new(entityId ?? String.Empty);
    var idp = new Sustainsys.Saml2.IdentityProvider(
        new Sustainsys.Saml2.Metadata.EntityId(idpEntityId),
        options.SPOptions)
    {
        MetadataLocation = metadataUrl,
        LoadMetadata = true,
    };
    options.IdentityProviders.Add(idp);
});

builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("Saml2", policy =>
    {
        policy.RequireClaim(ClaimTypes.NameIdentifier);
    });
});

builder.Services.AddControllers();
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(30);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});
```

```Program.cs (後半部分)

var app = builder.Build();

// Configure the HTTP request pipeline.

app.UseHttpsRedirection();
app.UseSession();

#if DEBUG
// CORSの有効化(開発時のみ)
app.UseCors(MyAllowSpecificOrigins);
#endif

app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();
```

```http.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Endpoints } from '../constants/endpoints';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

  get<T>(endpoint: string): Observable<T> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
      })
    };

    return this.http.get<T>(Endpoints.getUrl(endpoint), httpOptions);
  }

  post<T>(endpoint: string, body: any | null): Observable<T> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
      })
    };

    return this.http.post<T>(Endpoints.getUrl(endpoint), body, httpOptions);
  }
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
検索結果に従ってAngularからのHTTP GETのヘッダーに'Access-Control-Allow-Origin': '*'を追加したり、ASP.NET Core Web API側にAddCorsメソッドとUseCorsメソッドの呼び出しも追加しましたが解消できていません。

### 補足
バージョンは以下の通りです
.NET: 8
Angular: 18
Keycloak: 25

Keycloakでは、Valid redirect URIsに「https://localhost:7055/*」と「https://localhost:4200/*」を指定しています。

CORSエラーの回避方法がわかりません

###実現したいこと
Javascriptで非同期処理にてPDFファイルをサーバ側で作成し、そのファイルをダウンロードまたはブラウザで直接開きたい。

###発生している問題
作成したファイルを何かしら（バイナリ？）などで受け取り、
コールバックで別ウィンドウにPDFを開きたいです。
尚、諸事情によりサーバのPDFファイルを直接開くことはできません。

###該当のソースコード
＜サーバ側＞.NET
' レスポンスオブジェクト
With response
 response.ContentType = "application/octet-stream"
 response.WriteFile(strFilePath)
 response.End()
End With

＜Javascript＞
$.ajax({
    url: './api/print',
    type: 'POST',
    headers: {
    'Content-Type': 'application/json'
    },
    dataType: 'json',
    data: JSON.stringify(datajson)
}).done(function(res) {
    // ここでPDFを開きたいです。
})
.fail(function(jqXHR, textStatus) {
	alert( "Request failed: " + textStatus );
});


###試したこと
GETでレスポンスを直接受け取れば、ブラウザに表示できましたが、
実装時にそれはできないです。

またJavascriptでファイルを扱うときに、サーバ側がどんな形式でファイルを返せばいいかも教えていただけると助かります。

表示するためにはどうしたらいいか、お分かりの方、教えて下さい。

###補足情報(言語/FW/ツール等のバージョンなど)
asp.NET MVC 4 (API)

Javascriptでの非同期PDFファイル表示

### 実現したいこと

ASP.NET Web API を使用して、POSTされたXMLデータをクラスに取り込みたい。

POSTされたBody値をXML形式で取得しようとすると変数が NULL になってしまい取得することができません。
クラスは、XMLの構造にあわせてデータクラスを作成しました。
検索するとJSON形式で取得する方法は出てくるのですが、XML形式で取得する方法を見つけることができません。
どなたかご存じの方いらっしゃいませんでしょうか？

お手数をおかけしますが、どうぞよろしくお願い致します。

参考にさせて頂いたサイト
・ASP.NET Web API 2 を利用してシンプルなWebAPI アプリケーションを作成する - ASP.NET プログラミング
https://www.ipentec.com/document/csharp-asp-net-web-api-2-create-simple-application


### POST送信したXMLデータ

```
POST http://localhost:9000/Default
Content-Type: application/xml
Accept: application/xml

<?xml version="1.0" encoding="UTF-8"?>
<sample code="1.0">
  <data>
    <id>100</id>
  </data>
  <value>
    <name>aaaa</name>
    <version>1.0.0</version>
  </value>
</sample>
```

### 該当のソースコード
```C#
// データクラス
[System.Xml.Serialization.XmlRoot("sample")]
public class SampleData
{
    [System.Xml.Serialization.XmlAttribute]
    public string code;

    [System.Xml.Serialization.XmlElement("data")]
    public Data data;

    [System.Xml.Serialization.XmlElement("value")]
    public Value value;
}

public class Data
{
    [System.Xml.Serialization.XmlElement("id")]
    public string id;
}

public class Value
{
    [System.Xml.Serialization.XmlElement("name")]
    public string name;

    [System.Xml.Serialization.XmlElement("version")]
    public string version;
}

public class DefaultController : ApiController
{
    public string Post([FromBody] SampleData value)
    {
        return "value";
    }
}
```

### 補足情報（FW/ツールのバージョンなど）
Visual Studio Community 2019
C#
ASP.NET
Web API
Postman

ASP.NET Web APIでPOSTされたXMLデータをXML形式で取得する方法

ASP.NET WebApiのPost処理(C#)を、Windowsフォームアプリ(C#)から、HttpClient の PostAsyncメソッドを使って呼ぼうとしているのですが、どうもうまくいきません。
###発生している問題・エラーメッセージ
以下が返されて、対象のPostメソッドは呼ばれません。
      **The requested resource does not support http method 'GET'.**

###ソースコード
まず、WebApiの記述です。
```C#
    [RoutePrefix("api/GateApi")]
    public class GateApiController : ApiController
    {
   // パラメータ用のクラス定義
        public class para
        {
            public int GateNo { get; set; }
        }

   // Post処理
        [Route("TestPost")]
        [HttpPost]
        public string TestPost(para data)
        {
            return "Post呼ばれたよ";
        }
    }

```
試しに、同じサイト内のページに埋め込んだ、以下のJavascriptでPOSTしてみましたが、これは正常に処理されます。
値も正常に渡るし、戻り値も返っています。
```JavaScript
    function testPost() {
        $.ajax(
        "/api/GateApi/TestPost/",
        {
            type: "POST",
            data: { GateNo: 333 },
            success: function (data) {
                alert(data);
            },
            error: function (e) {
                alert("エラー");
            }
        });
    }
```
以下が、Windows Formのソースの一部です。
ボタンをクリックするとレスポンスがラベルに表示されます。
```C#
        private void button_Click(object sender, EventArgs e)
        {
            PostWebPageAsync();
        }

        private async void PostWebPageAsync()
        {
            this.label1.Text = "Post取得中";

            string uri = "http://localhost:12345/api/GateApi/TestPost/";

            // "Message":"The requested resource does not support http method 'GET'. が返されます。
            this.label1.Text = await Post(uri, 
						new Dictionary<string, string> {{ "GateNo", "123" }});
        }

        // Post呼び出し処理
        private async Task<string> Post(string url, Dictionary<string, string> param)
        {
            string result = "";

            try
            {
                HttpClient httpClient = new HttpClient();
                httpClient.MaxResponseContentBufferSize = int.MaxValue;
                HttpContent content = new FormUrlEncodedContent(param);
                var response = await httpClient.PostAsync(url, content);
                String text = await response.Content.ReadAsStringAsync();

                result = text;
            }
            catch (Exception Err)
            {
                result = "ERROR: " + Err.Message;
            }

            return result;
        }
```
例外は発生していないようですが、ラベルには、
  ** "Message":"The requested resource does not support http method 'GET'. **
が表示されます。
 response.StatusCode は  MethodNotAllowed が返されます。

何か、ヘッダなど必要な情報があるんでしょうが、よくわかりません。
###補足情報
サーバー側もクライアント側も、.NETのバージョンは 4.5.1

ＩＩＳのログの抜粋です
---------------------------------------------------------------------
■うまくいくとき → ChromeのRest Client で呼び出し
2015-10-13 03:06:50 ::1 POST /api/GateApi/TestPost - 12345 - ::1 Mozilla/5.0+(Windows+NT+6.1;+WOW64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/45.0.2454.101+Safari/537.36 - 200 0 0 2620

■うまくいかないとき → WindowsForm で呼び出し
2015-10-13 03:09:21 ::1 POST /api/GateApi/TestPost/ - 12345 - ::1 - - 302 0 0 13
2015-10-13 03:09:21 ::1 GET /api/GateApi/TestPost/ AspxAutoDetectCookieSupport=1 53903 - ::1 - - 405 0 0 266
---------------------------------------------------------------------
上記ログ（うまくいかないほう）とソースの対応を調べたのですが、
  1行目： var response = await httpClient.PostAsync(url, content);  →  POST  
  2行目： String text = await response.Content.ReadAsStringAsync(); → GET
ということでした。
１行目の処理で、エラーが帰りそのため2行目のＧＥＴがうまくいかないということのようです。

1行目POST時の戻り値の内容を一部抜粋
---------------------------------------------------------------------
    IsSuccessStatusCode: false
    ReasonPhrase: "Method Not Allowed"
    RequestMessage: {Method: POST, RequestUri: 'http://localhost:12345/api/GateApi/TestPost/?AspxAutoDetectCookieSupport=1', Version: 1.1, Content: System.Net.Http.FormUrlEncodedContent, Headers:
{
  Content-Type: application/x-www-form-urlencoded
  Content-Length: 10
}}
---------------------------------------------------------------------
---
###[その後の調査]

eripong さん

貴重な情報ありがとうございます。
セッションＩＤの受渡のために、クッキーを使うかどうかの設定の話だと思うんですが、私の知識では、いまいち細かいしくみがわかりません。ただ、これを機に多少とも勉強させていただきます。

最低限の私の知識で理解できる範囲で、以下いろいろやってみました。

■まず、cookieless の設定による実行結果です。（○がPOST成功）
   × UseUri
   ○ UseCookies
   × AutoDetect
   ○ UseDeviceProfile

おっしゃるように、UseCookiesだとうまくいくようで、UseDeviceProfileでも大丈夫みたいです。

つまり、設定としては、
-       <sessionState mode="Off" />
-       <sessionState cookieless="UseCookies"/>
-       <sessionState cookieless="UseDeviceProfile"/>
のいずれかだとうまくいくということになります。


■次に、Chromeのクッキーの状態を見てみました。
![イメージ説明](610cb19cc05811113ec4cda8074525ce.jpeg)
AspxAutoDetectCookieSupportの値が１として保存されているようです。

試しに、これを削除して、JavascriptやREST ClientツールでGETしてみると、見事にエラーになります。
ただ、このときに再度AspxAutoDetectCookieSupport=1 が保存され、2回目以降はエラーにならないようです。

■REST Client でのＰＯＳＴ実行結果
各処理のリクエストの内容を細かく調べる方法がわからないので、とりあえず情報として載せておきます。

以下は、REST Client でＰＯＳＴに失敗した時の状況です。
![イメージ説明](ec24d599550c1b4df164ada41a965364.jpeg)
POST時に、AspxAutoDetectCookieSupport=1にリダイレクトしてるということでしょうか。その結果「405 Method Not Allowed」が返されています。そして、その後、GETしようとしてエラー返されているようです。

最後に、REST Client でＰＯＳＴに成功した時の状況です。
![イメージ説明](7f355c63f813050726d651effbc5a9d3.jpeg)

ASP.NET WebApi を HttpClient の PostAsyncメソッドで呼び出し

FastAPIにて、ファイルをダウンロードする際、
以下のようにFileResponseを用いると思いますが、
複数ファイルをダウンロードする方法がわかりません。

ご存知の方いらっしゃいましたらご教示の程よろしくお願いいたします。

```ここに言語を入力
@app.get("/files/{filename:path}")
async def download_file(filename: str):
    current = Path()
    file_path = current / "files" / filename
    response = FileResponse(
                    path=file_path,
                    filename=f"download_{datetime.now().strftime('%Y%m%d%H%M%S')}_{filename}"
                )
    return response
```


Fast APIで複数ファイルをダウンロードする方法

### 前提

TypeScriptとReact.jsでポケモンのダメージを計算するシステムを作っています。
PokeAPIというデータベース型のWebAPIを使ってポケモンのデータを取得したいです。
（ポケモンの名前・画像・種族値・技・タイプなど）

649種のポケモンの名前を一度にまとめて取得するような実装をしたいのですが、
サイトを読み込むごとにAPIにアクセスしてデータを取得する以外に
事前にデータを読み込んでおくなどの方法があれば、教えていただけると幸いです。
ポケモンのデータは不変的なので、事前にデータを読み込むのが得策だと考えました。

https://teratail.com/questions/184320
↑の質問の回答でtanatさんがおっしゃった
- データの取得をキューで管理してバックグラウンドで非同期で行わせたり
- データの保存を毎回DBに保存するのではなくて一旦ファイルで保存しておいて、一回のループの時間を短くする
という方法に興味があるのですが、具体的な方法がまったく分かりません。

拙い文章ですみません。
情報が足りない等の不足な点があれば、指摘いただけると幸いです。


### 発生している問題

PokeAPIは、リクエストが1時間に100回までに制限されています。


### 補足情報

PokeAPIのドキュメント
https://pokeapi.co/docs/v2

PokeAPIのTypeScript対応のリクエスト送信用のライブラリ
https://pokenode-ts-docs-gabb-c.vercel.app/


WebAPIから大量のデータを取得する方法

お世話になります。

C# ASP.NET Web APIにてHTTPリクエストを行った際にJSONのレスポンスを行いたいのですが、
postmanにてリクエストを送信すると、下記のコードだと空のJSONが出力されてしまいます。
C#自体まだ使い慣れておらず、とても初心者のような質問で申し訳ございませんがなにとぞご教示お願い致します。


```C#
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

using System.Text.Json;
using System.Text.Json.Serialization;

namespace JsonService.Controllers
{
    [Route("/api/json")]
    [ApiController]

    public class JsonController : ControllerBase
    {
        [HttpPost]
        public MyItem GetItem()
        {
            MyItem item = new MyItem();
            item.name = "hoge";
            item.count = 5;
            item.price = 150;
            item.code = "nv-8";

            return item;
        }

    }
}
public class MyItem
{
    public string name;
    public int count;
    public double price;
    public string code;
}
```

開発環境
OS　windows10
Visual Studio 2019
ASP.NET Core Web API
.NET 5.0

C# HTTPリクエストにてJSONのレスポンスを行う。

現在、Web APIの勉強をしており、Flickrを使用して画像を出す方法について困っています。

同じ所に、例えば「犬」と「猫」を5枚づつ表示させるにはどうしたらいいのか分からず困っています。
「text」に['cat'&'dog']や['cat&dog']や['cat,dog']など色々試したのですがイメージのように表示されません。
例として下記のようにコードを書きましたので、分かりやすくご教授のほどよろしくお願い致します。

Flickrで画像を保存して表示ではなく、「text」を使用して表示させたいです。

よろしくお願い致します。

```JavaScript
// Flickr API key
const apiKey = '//個人のAPIのKey';

// Flickr画像データのURLを返す
const getFlickrImageURL = (photo, size) => {
  let url = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${
    photo.secret
  }`;
  if (size) {
    // サイズ指定ありの場合
    url += `_${size}`;
  }
  url += '.jpg';
  return url;
};

// Flickr画像の元ページのURLを返す
const getFlickrPageURL = photo => `https://www.flickr.com/photos/${photo.owner}/${photo.id}`;

// Flickr画像のaltテキストを返す
const getFlickrText = (photo) => {
  let text = `"${photo.title}" by ${photo.ownername}`;
  if (photo.license === '4') {
    // Creative Commons Attribution（CC BY）ライセンス
    text += ' / CC BY';
  }
  return text;
};

// リクエストパラメータを作る
const parameters = $.param({
  method: 'flickr.photos.search',
  api_key: apiKey,
  text: 'cat', // 検索テキスト
  sort: 'interestingness-desc', // 興味深さ順
  per_page: 5, // 取得件数
  license: '4', // Creative Commons Attributionのみ
  extras: 'owner_name,license', // 追加で取得する情報
  format: 'json', // レスポンスをJSON形式に
  nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない
});
const url = `https://api.flickr.com/services/rest/?${parameters}`;
console.log(url);

// 猫の画像を検索して表示
$.getJSON(url, (data) => {
  console.log(data);

  // データが取得できなかった場合
  if (data.stat !== 'ok') {
    console.error('データの取得に失敗しました。');
    return;
  }

  // 空の<div>を作る
  const $div = $('<div>');

  // ヒット件数
  $div.append(`<div>${data.photos.total} photos in total</div>`);

  for (let i = 0; i < data.photos.photo.length; i++) {
    const photo = data.photos.photo[i];
    const photoText = getFlickrText(photo);

    // $divに <a href="..." ...><img src="..." ...></a> を追加する
    $div.append(
      $('<a>', {
        href: getFlickrPageURL(photo),
        class: 'd-inline-block',
        target: '_blank', // リンクを新規タブで開く
        'data-toggle': 'tooltip',
        'data-placement': 'bottom',
        title: photoText,
      }).append(
        $('<img>', {
          src: getFlickrImageURL(photo, 'q'),
          width: 150,
          height: 150,
          alt: photoText,
        }),
      ),
    );
  }
  // $divを#mainに追加する
  $div.appendTo('#main');

  // BootstrapのTooltipを適用
  $('[data-toggle="tooltip"]').tooltip();
});
```