本当はjsonが帰ってきてほしい

Headersのpostman tokenを取り除いたら無事に帰ってきた。

Postmanでステージング叩いたら403でHTMLが帰ってくる

本当はjsonが帰ってきてほしい
Headersのpostman tokenを取り除いたら無事に帰ってきた。...

なぜかHTMLが返却されているのに、`console.log()`が表示されていない場合は、cacheを疑う。

```ts
@Get('/redirect')
@Header('Cache-Control', 'none') // 👈追加
@Redirect('*', HttpStatus.TEMPORARY_REDIRECT)
public async redirectFunc() {
  ...
  console.log('Hello')
  return { url }
}
```
https://docs.nestjs.com/controllers
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control

Chromeの場合、`must-understand`が無いと、キャッシュされてしまう。要調査が必要。

```ts
@Header('Cache-Control', 'must-understand, no-store, no-cache, max-age=0')
```

Firefox, Edgeだと下記でもキャッシュされない。

```ts
@Header('Cache-Control', 'no-store, no-cache, max-age=0')
```

## redirectのcacheの削除

chacheを明示的に削除

https://zenn.dev/phi/articles/clear-301-redirect-cache-by-chrome

一時的な削除

Chrome DEV tool でネットワークタブから、キャッシュを無効化を選択

## Statusコード

https://developer.mozilla.org/ja/docs/Web/HTTP/Redirections

> 302 Found：302 Foundは、要求されたリソースが一時的に新しいURLに移動されたことを意味します。今後のリクエストでは、訪問者が同じURLを使用する必要があります。

https://www.geeksforgeeks.org/http-status-codes-redirection-responses/

302を使用するのが良さそう

## Cache-Control

- [Cache-Controlとは？ | キャッシュの概要 | Cloudflare](https://www.cloudflare.com/ja-jp/learning/cdn/glossary/what-is-cache-control/)


NestJS redirect cache

## OpenAPIの一例

[ReduxToolkit RTKQuery](https://redux-toolkit.js.org/rtk-query/overview): データフェッチとキャッシュのライブラリだが、[Code Generation | Redux Toolkit](https://redux-toolkit.js.org/rtk-query/usage/code-generation)のようにコード生成ができる。

### OpenAPIとは

> The OpenAPI specification is a language-agnostic definition format used to describe RESTful APIs.
> **OpenAPI仕様は、 RESTfulAPIを記述するために使用される言語に依存しない定義形式です。**
> https://docs.nestjs.com/openapi/introduction より

ざっくり理解

```mermaid
flowchart LR
 A["OpenAPI定義ファイル (hoge.yml)"] -->B["RTK Query Code Generation (hoge.ts)"] -->C["使える！ (redux storeに定義したり、各コンポーネントでAPI呼び出し)"]
```

q: `hoge.yml`はどんな感じで生成するの？

### 良さそうなところ

- **1.OpenAPIの定義ファイルがあれば、一気にエンドポイントを生成・変更できる**
- **2.TypeScriptの場合、型が効く（RequestやResponseなども含めて）**

### どんな感じで使うの

```package.json
 "scripts": {
 "gen:api": "rtk-query-codegen-openapi ./openapi-config.json",
 },
 "dependencies": {
 "@reduxjs/toolkit": "^1.8.0",
 "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
 "react-redux": "^7.2.6"
 }
}
```

のように、コマンドで一気に、APIエンドポイントの生成をすることができる。

```openapi-config.json
{
 "schemaFile": "./hoge.yaml", // OpenAPIの仕様書 
 "apiFile": "./template.ts", // createApi呼び出し箇所
 "outputFile": "./index.ts", // OpenAPIの仕様書から作成される実際のAPI呼び出しやリクエスト・レスポンスなど
 "exportName": "api", // export名
 "hooks": true // hooksを生成するか　ex) useHogeHoge
}
```

```hoge.yml
swagger: '2.0'
info:
 title: 'hoge.proto'
 version: 1.0.0
 description: 'お試し'
consumes:
 - application/json
produces:
 - application/json
host: 'hoge.com'
basePath: '/v1'
schemes:
 - 'https'
paths:
 ...
```

みたいなファイル

[OpenAPI Specification - Version 3.0.3 | Swagger](https://swagger.io/specification/)に定義が載っている。

## gRPC

`.proto`ファイルを使用して、APIを定義する。

IDL（インターフェース定義言語）

## リンク

[API 設計: gRPC、OpenAPI、REST の概要と、それらを使用するタイミングを理解する | Google Cloud Blog](https://cloud.google.com/blog/ja/products/api-management/understanding-grpc-openapi-and-rest-and-when-to-use-them)

Postmanでステージング叩いたら403でHTMLが帰ってくる

Related

TAGS

SHARE