常連

### 実現したいこと
私のサービスのポートを8080から80に変更してください。

### 発生している問題・分からないこと
8080から80にポートを変更しようとしましたが、うまくいかないようです…デバッグにはEchoAPIを使いましたが、うまくいきませんでした。Thunder ClientやPostmanも試しましたが、ダメでした。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-29/e573ad6d-411e-45f1-a5dd-10d02dfe4a2f.png)

Did I not change it correctly, or am I using the tools wrong?

### エラーメッセージ
```error
action：
liutianyu@MacBook-Pro ~ % /Users/liutianyu/Downloads/frank
port=80
but:
Server is running on
0.0.0.0:8080
```

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

```
特になし
```

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

##### 上記の詳細・結果
「port = 80」を試しましたが、調整時にはまだ8080が必要です。

### 補足
特になし

どうすればこのポートを8080から80に変更できるのか。変更したつもりだけど、うまくいかなかったようで、デバッグが成功しません。

### 実現したいこと
スマホネイティブアプリから、外部Webサービスに接続する時（Webブラウザを立ち上げる）、
特定のドメインからの遷移で認証して外部Webサービスに接続させるという要件があります。

ネイティブアプリからの遷移だと、Refererがつかないので、
外部Webサービスに遷移する前に自前に用意したWebページ（認証用のドメインのページ）に遷移してからリダイレクトさせることで、Referer認証させ外部サービスへ接続させるように実装しようと考えてます。

そのリダイレクト用のWebページの実装する際の質問となります。


### 発生している問題・分からないこと
外部WebサービスへのURLが動的に変化する（クエリパラメータが動的に変化する）ため、
リダイレクト用のWebページへどのようにパラメータを渡して、javascriptでリダレクトさせるかを
実装方法をご教示頂けますと幸いです。

リダイレクト用のWebページのURL: https://dev.xxxx.yyyy.zzzz/index.html?redirect_url=<動的に変化するURL>

index.htmlはAWS APIGW → S3 のどこかに配置しています。

また、セキュリティ的にまずいとか、それよりこの方法がbetterなどあればアドバイスして頂きますと幸いです。何卒宜しくお願い致します。



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

```
特になし
```

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

##### 上記の詳細・結果
cf.) https://www-creators.com/archives/4463 など

### 補足
随時、補足いたします。

スマホネイティブアプリからリダイレクト用のWebページを挟み、リファラー認証ありの外部Webサービスへ接続したい

### 実現したいこと
フロントエンドをVue、バックエンドをJavaでWebアプリを作成しています。
バックエンドでのAPIの実装のパターンで2つのケースを想定しているのですが、どちらが一般的な手法であるかを知りたいです。

### 発生している問題・分からないこと
複合的なデータが更新されるケースでのAPIの実装方法がわからないです。

例えば、販売管理システムを考えると、
お客様からの注文を受けた時点で営業担当が何らかのフォームにデータを入力することで、お客様の情報や注文情報などが顧客テーブルや注文テーブルにインサートされると思います。

1つのフォーム処理で複数のテーブルに更新が走るケースでの実装方法ですが、
①バックエンドのAPIをREST APIで実装していた場合、以下のようなURIになると思います。
/api/customer (顧客の新規作成)
/api/order (注文の新規作成)
このような場合、フロントエンドでは顧客のデータを更新するためのAPIをそれぞれ2回呼び出すのでしょうか？

②もしくは複合データモデルを作っておいて、
/api/orderreceive
のようなAPIを一度だけ呼び出したら、その中で顧客の新規作成も注文の新規作成も行われるような形でしょうか？

①だとフロント側の呼び出しが冗長になるのと、API呼び出しを繰り返すことでパフォーマンスに悪影響が出るのではと思っていて、
②だとバックエンドをREST APIで実装していた際に、RESTの原則に反する実装になってしまわないかと思っています。

私はWeb開発初心者のため、認識に間違いがあれば、指摘いただけますと幸いです。また、情報に不足があれば、可能な限り補足しますので、コメント頂けたらと思います。よろしくお願いします。



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

```
特になし
```

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

##### 上記の詳細・結果
書籍等もいくつか確認しましたが、初心者向けの書籍では求めている情報を見つけられませんでした。

### 補足
特になし

フロントエンドとバックエンドのデータをやりとりする際のAPI実装について

現在フロントのHTMLからAPIを叩いてメールを送信しようとしています。
しかし、送信ボタンを押すと下記のようなエラーがコンソールに出力されます
`Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.`

このエラーをググったところ今いるURLから他のURLにリクエストを送ることができないようになっていると書かれてありました
そのためこれを回避するために下記のようのコードを書いたのですが、どうもエラーが解消されません。
どのように書いたらAPIを叩けるのか教えていただきたいです。

```JS
const button = document.getElementById("button");
button.addEventListener("click", function(e) {

    e.preventDefault();

    const name = document.getElementById('name').value;
    const subName = document.getElementById('subName').value;
    const companyName = document.getElementById('companyName').value;
    const pref_name = document.getElementById('pref_name').value;
    const location = document.getElementById('location').value;
    const companyLocation = document.getElementById('companyLocation').value;
    const tellNumber = document.getElementById('tellNumber').value;
    const mailAddress = document.getElementById('mailAddress').value;
    const question = document.getElementById('question').value;

    function sendmail(subject, body) {
        return fetch('MY-API', {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ subject, body })
        }).then(onLoadFunc);
    }
    sendmail(name,subName,companyName,pref_name,location,companyLocation,tellNumber,mailAddress,question);
});
```

CORSでJSからAPIを叩けない

- 今回実現したい事
　公式LINEに送った内容をそのまま返すコードを書きたい

- 前提条件
　コードはWebアプリでデプロイをした上でLINEDevelopersにIDを転記し、検証まで行い成功はしている

- 現状
　エラーの原因を探る中で下記のコードでもエラーが起きている
下図はGASでのログ
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-11/6b7c74a0-37bb-423e-82ab-8d272bb7980c.png)
```gas
function doPost(e) {
  debug("Start");
}

function debug(value='デバッグテスト') {
  const sheet = SpreadsheetApp.openById('固有ID');
  const ss = sheet.getSheetByName('GASlogs');
  const date = new Date();
  const targetRow = ss.getLastRow() + 1;
  ss.getRange('A' + targetRow).setValue(date);
  ss.getRange('B' + targetRow).setValue(value);
}
```

→今知りたいこと
当初に書いた事とは逸れてしまうが、メッセージを送った段階で指定のスプレットシートに入力出来るようになって欲しい
スプレットシートに入力するdebug()関数に関してはデバックを行い動くことは確認済みです。

公式LINEとGASを使ってオウム替えしのコードを書いてみたがエラーになる

WPのカスタム投稿（column）の記事一覧を、同一サーバー、別ドメインのWPで取得したいです。
現状、REST APIを使用し、以下のコードでアイキャッチ、タイトル、リンクは取得できました。

それぞれの記事の属するタクソノミーを取得し、元サイトのターム一覧へ飛ばすようにしたいのですが、方法がわからず相談させていただきました。

また、記事は全部で100件までしか表示できないようなのですが、できれば全件表示したいのですが、REST API以外にもっといい方法があればご教授いただきたいです。
アイキャッチ、タイトル、リンク、タームリンクを取得し、全件表示できるのが理想なのですが、なかなかいい方法が見つかりません。よろしくお願いします。

```php
<?php get_header(); ?>
	<div id="wrapper">
		<div class="inner">
			 <div id="wordpress_blog"></div>
		</div>
	</div>
<?php get_footer(); ?>

```

```jquery
$(function(){

  $.ajax({
      type: 'GET',
      url: '【ドメイン名】/wp-json/wp/v2/column?_embed',
      dataType: 'json'
  }).done(function(json){
    var html = '';
    //記事の件数分イテレートする
    $.each(json, function( i, row ) {

      //ブログのタイトル
      var title = row.title.rendered;
      //ブログのURL
      var link = row.link;
		
      //サムネイル画像のURL
      var thumbnail
      if( row['_embedded']['wp:featuredmedia'] ) {
         thumbnail = row['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url']
      }
      html += '<article class="wp-article">';
      html += '<div class="eyecatch"><img src="' + thumbnail + '"></div>';
      html += '<h3><a href="' + link + '">' + title + '</a></h3>';
      html += '</article>';
    });
    //整形した記事の情報をページに追加する
    $('#wordpress_blog').append(html)
  }).fail(function(json){
      console.error('WordPressのブログ記事取得に失敗しました。')
  });
});
```


WPのカスタム投稿の記事一覧を、同一サーバー、別ドメインのWPで取得したいです。

![Insomnia API.png](https://assets.echoapi.com/upload/user/216769532487155712/log/8d668166-732d-4b65-bf75-10e00aba24bf.png "Insomnia API.png")

## Insomniaとは
Insomniaは、主に開発者やAPIエンジニア向けのクロスプラットフォームのデスクトップアプリです。高機能なHTTPクライアントであり、HTTPリクエストの作成、送信、レスポンスの確認を行うことができます。

![Insomniaとは.png](https://assets.echoapi.com/upload/user/216769532487155712/log/bb26188e-e04e-4464-a273-a720fd0d759b.png "Insomniaとは.png")

## Insomniaの機能
Insomniaは非常に有名なAPI管理ツールとして、以下の機能を備えています：

- **リクエスト作成と送信**: HTTPメソッド（GET、POST、PUT、DELETEなど）、URL、ヘッダー、パラメータ、ボディデータを設定し、APIリクエストを作成し送信できます。
- **レスポンスの確認**: サーバーからのレスポンスのステータス・コード、ヘッダー、ボディデータが表示され、解析やデバッグが行えます。
- **環境変数の管理**: 開発、ステージング、本番など異なる環境間で変数を管理し、APIリクエストの動的な値の使用・切り替えが簡単にできます。
- **リクエストのグループ化**: ワークスペース、フォルダ、グループなどの階層構造を使用し、複数のAPIリクエストを整備・管理できます。
- **複数の認証方式のサポート**: ベーシック認証、OAuth、Bearerトークンなど、さまざまな認証方式をサポートし、APIテスト・アクセスのセキュリティ保証が可能です。

## RESTful APIリクエストを送信する方法

![How to Send a RESTful API Request with Insomnia.png](https://assets.echoapi.com/upload/user/216769532487155712/log/d299fd1b-b541-463b-8218-4940bb412cb6.png "How to Send a RESTful API Request with Insomnia.png")

1. **Insomniaを開き**、**Debugタブ**に切り替え、**New Request**を選択します。
2.「HTTP Request」**を選択し、左側のパネルで**「New Request」**をダブルクリックしてリクエストの名前を設定します。
3. メソッドのドロップダウンメニューから通信方式（GET、POST、PUTなど）を選択します。
4. アドレスバーにAPIのエンドポイントのURLを入力します。
5. APIリクエストに認証トークンなどが必要な場合、「**Auth**」タブに切り替え、認証情報を記入します。
6.「Send」ボタンをクリックして、リクエストを送信し、レスポンスを取得します。

## リクエストに利用できるオプション
- **Body**: タブ上のBodyドロップダウンメニューからBodyタイプを選択し、リクエストのBodyに内容を追加します。
- **Auth**: タブ上のAuthドロップダウンメニューから認証のタイプを選択します。
- **Query**: クエリパラメータをリクエストURLに追加します。（例：`?page=1`）
- **Header**: リクエストにHeaderを追加します。（例：`Content-Type: application/json`）
- **Docs**: リクエストの説明文を追加します。

---

## EchoAPI：より優れた代替案
Insomniaは優れたツールですが、EchoAPIによってAPI開発のより優れた代替案が提供されています。EchoAPIはAPI設計、デバッグ、自動テスト、負荷テストをサポートする超軽量のコラボレーション・ツールです。IntelliJ IDEA、VS Code、Chrome向けのリクエストキャプチャ拡張機能のプラグインも提供しており、ログインの必要がないため、Postmanの完璧な代替品となります。

![EchoAPIを検討してみてください](https://assets.echoapi.com/upload/user/216769532487155712/log/4897deb0-5495-44f8-92c2-32a6175267a4.png "EchoAPIを検討してみてください")

EchoAPIは以下のような特徴を持っています：

- スクラッチパッドをサポートする超軽量なAPI開発ツール
- API設計、デバッグ、自動テスト、負荷テストなど機能の提供
- IntelliJ IDEA、VS Code用のプラグインとChromeリクエストキャプチャ拡張機能の搭載
- ログイン不要で利用可能



Insomniaの使い方：詳細ガイド

### 実現したいこと
ログイン不要で使用できる翻訳サイトをnext.jsにて作成しています。
作成にあたりサイト内にAPIを設置するのですが、そのAPIの保護方法について教えていただきたいです。

### 発生している問題・分からないこと
ログイン不要で使用できるようにしたいため、APIの保護方法が全く分かりません。
具体的にはAPIを自分の作成するサイト以外から使用できないようにしたいのです。

自分のサイトのフロントエンドのみリクエストを許可し、別の人が作ったプログラムなどからリクエストをしても使用できないように、ということです。



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

```
特になし
```

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

##### 上記の詳細・結果
JWTトークンを利用しようかと思って以下のような実装をした

サイトにアクセスすると自動的にトークンを発行
↓
HttpOnlyCookieにトークンを保存
↓
トークンとともにAPIにアクセス
↓
トークンの期限が切れていたら再度トークン取得

でもこれでは意味ないのでは、と思いました。
攻撃者がトークンを発行するAPIを叩いたら不正利用できてしまうし、これだけならばトークンを使っても使わなくてもリスクはそこまで変わらないのでは、と....

### 補足
提案いただけますと幸いです。
こう検索すれば出てくるよなどでも構いません。

DeepLの場合APIリクエストを単純に再送信してもエラーが出てしまうのですが、どうしてなのでしょうか。
どういった仕組みなのでしょうか。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-08-31/72b34c77-37c8-4b17-bc49-46075f9c7788.png)

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-08-31/ea49d5dd-2eb5-4706-b018-fc2674ee436e.png)