複数のサーバーにリクエストを送る際のproxyの設定について

Nuxt.jsで個人的にアプリの開発をしています。

axiosを使用してAPI通信をしており、CROS制約回避の為、proxyを使用しているのですが複数のサーバーにリクエストを送る際のproxyの設定方法がよくわかりません。

ネットで調べてみるのですが、解決できそうな記事が見当たらずこちらで質問させていただきました。

#実現したいこと

データベースはDynamoDBを使用しています。
投稿内容をDynamoDBに登録そして、データベースから取得したいです。

javascript
1    signUp(){
2      this.$axios.$get('/signUp',
3      {
4        m_users: {
5            user_name: this.username,
6            mailaddress: this.mailaddress,
7            password: this.password
8        }
9      })
10      .then(res => {
11        console.log(res);
12      });
13    },
14    async getList() {
15      await this.$axios.$get('/api')
16        .then(res => {
17            console.log(res);
18        });
19    }
20    async addPost() {
21      await this.$axios.post('/post',
22                {
23                  t_items: {
24                      item_id: this.nextId,
25                      shop_name: this.shop,
26                      item_name: this.name,
27                      item_price: this.price,
28                      item_unit: this.unit,
29                      post_date: date
30                  }
31                }
32      )
33      .then(res => {
34        console.log(res);
35      })

javascript
1  proxy: {
2    '/api': {
3      target: 'URL',
4      pathRewrite: {
5        '^/api': ''
6      }
7    },
8    '/signUp': {
9      target: 'URL',
10      pathRewrite: {
11        '^/api': ''
12      }
13    },
14    '/post': {
15      target: 'URL',
16      pathRewrite: {
17        '^/api': ''
18      }
19    }
20  },
21  axios: {
22    prefix: '/api',
23  },

これで合っておりますか？
教えていただけると幸いです????‍♂️

ockeghem

2021/04/30 13:50

提示いただいたコードだと「複数のサーバーにリクエストを送る」様子がくみ取れないので、もう少し「何をしたいのか」を追記された方が回答が得られやすいと思います。

F_Yohei

2021/05/01 02:16

ご指摘いただきありがとうございます。編集してみたのですが、ご覧いただけると嬉しいです。

ockeghem

2021/05/01 05:08

APIサーバーはご自身で用意したものですか? CORS回避というからには複数サーバがあるのだと思いますが、複数のサーバーおよびPROXYはどのような状況なのでしょうか?

F_Yohei

2021/05/01 05:27

書き方間違えてました。サーバーに複数のリクエストを送る時です。

ockeghem

2021/05/01 06:11

1台のサーバーに複数リクエストですか? PROXYは必要ないのではないですか?

F_Yohei

2021/05/01 06:14

そうなんですか？すみません、初心者であまり理解できてないです。 1台のサーバーだとproxyは必要ないのはなぜなんですか？

行動規範の内容に同意します

回答1件

ベストアンサー

コメントのやりとりから察するに、CORSとPROXYについて誤解をされているように見受けます。

まず、CORSですが、HTMLとAPIで異なるサーバーを用いている場合が通常問題になります。
たとえば、HTMLが https://example.jp で、APIが https://api.example.net で提供されている場合、HTMLとAPIは別のサーバー（厳密にはオリジンという単位を用います）なので、同一オリジンポリシー違反となります。

CORSは同一オリジンポリシー違反の場合でもアクセスできるようにする仕組みSで、API(https://api.example.net)で、HTML側にアクセスの許可を与える仕組みです。CORSでアクセスが許可されている場合はPROXYは必要ありません。一方、そもそもHTMLとAPIが同じサーバー（オリジン）である場合は、CORSの許可が必要なく、PROXYも必要ありません。

PROXYを用いるのは、APIが別サーバーで、かつCORSの許可もない場合に用いる方法で、HTMLと同じサーバー（この場合は https://example.jp）で、API（https://api.example.jp）を中継することで、ブラウザからみたサーバーを同じ https://example.jp に揃えるものです。

同じサーバーを用いる場合は、CORSもPROXYも必要ありません。

投稿2021/05/01 08:02

ockeghem

総合スコア11705