常連

注目の的

例えば、firebaseが提供しているgoogleプロバイダーの認証機能を使って、GETしたユーザーのuidを
Usersコレクションの中のdocumetのidとして扱うとします。
この際に、ユーザーのプロフィールページのurlに、このuidを使うような設計は
セキュリティ的にいかがなものかと思いました。
確かに、ユーザーのemailとpasswordを知らないと、uidを知っていても、ユーザーの情報を扱えないという意見は
あります。
しかし、少ないからず、ユーザーのセキュリティを弱くしてしているかもしれないという懸念があることと、
googleの認証プロバイダーを使うケースでは、勝手にuidを公開状態にしたことになると思います。
セキュリティ的に問題ないでしょうか。

よろしくお願いいたします。

firebaseの認証で扱うユーザーのuidを公開の状態にしてもセキュリティ的に問題ないか。

### 前提・実現したいこと

Vue.js、Quasar、Node.js、Firebaseを使用して簡単な記録アプリを作っています。
現在データ登録機能を実装中ですが、ブラウザでデータ登録時に以下のCORSエラーが発生します。

### 発生している問題・エラーメッセージ

```
Access to XMLHttpRequest at 'http://localhost:3000/createRecord' from origin 'http://localhost:8080' 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.
```
'Access-Control-Allow-Origin'はバックエンドで設定しているはずなのに。。。

### 該当のソースコード

フロントエンド
```vue
methods: {
    createRecord() {

      let formData = new FormData();
      formData.append("test", this.record.test);
      formData.append("date", this.record.date);

      this.$axios
          .post(`${process.env.API}/createRecord`, formData)
          .then(response => {
            console.log("response: ", response);
           })
           .catch(err => {
             console.log("err: ", err);
           });
    )
```

バックエンド
```JavaScript
app.post('/createRecord', (request, response) => {
    response.header('Access-Control-Allow-Origin', '*'),
        db.collection('records').add({
            test: request.body.test,
            date: request.body.date
      }).then(() => {
        response.send('Record added')
      })
    console.log(request.body)
    })
```

### 試したこと
axiosではなくfetchAPIを用いて以下のように実装しましたが、引き続きcorsエラーが発生し解決しませんでした。

フロントエンド
```vue
//省略//

let formData = {
        test: this.record.test,
        date: this.record.date,
}

fetch(`${process.env.API}/createRecord`, {
          method: "post",
          mode: "cors",
          cache: "no-cache",
          credentials: "include",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(formData)
        })
//省略//

```
バックエンドでは以下を追加してみましたが、解決に至りませんでした。
```JavaScript
    response.header('Access-Control-Allow-Origin', '*'),
    response.header('Access-Control-Allow-Headers', 'Content-Type'),
    response.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'),
    response.header('Access-Control-Max-Age', '600');
```

fetchAPIでmode: "no-cors"にするとデータ登録が可能ですが、セキュリティ面で危ないということでしたので、mode: "cors"の状態でデータを登録したいです。

corsについての知識が浅いため、フロント・バックエンド共にどのような実装にすべきか分からない状態です。
どなたかご回答いただけると幸いです。

CORSエラーによりサーバにデータを渡せない

【質問】Flex```align-content: center;```を使っても縦の中央に出力できません。なぜでしょうか？

![before](b88259c09876074d723b8274d9e6cd66.png)
--------------------------------------------------------------↑これを
![after](f56d978a4248f365ce1490c43774a62f.png)
--------------------------------------------------------------↑こうしたい

```
<div class="contents-wrapper">

      <div class="description-container">
        <div class="description-icon">
          <img src="123456789.jpg" alt="">
        </div>

        <div class="description">
          <h2>出張先でも、アットホーム</h2>
          <p>出張のときも、新天地に異動のときも安心。他の出張者が5つ星評価をつけたお部屋やデザイナーズホテルを探しましょう。</p>
          <a href="#">仕事用スペースを完備した宿泊先を検索</a>
        </div>

      </div>
    </div>
```
```
.contents-wrapper{
  width: 100%;
  height: 1590px;
  margin-top: 60px;
}

.description-container{
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-evenly;
}

.description-container:nth-child(even){
  flex-direction: row-reverse;
}

.description-icon{
  width: calc(42% - 30px);
  height: calc(100% - 20px);
}

.description-icon img{
  width:100%;
  object-fit: cover;
  height: 100%;
}

.description{
  width: calc(58% - 30px);
  height: calc(100% - 20px);
  padding-left:155px;
  padding-right:155px;
  align-content: center;　/* ←これが効かない*/
}

```

以上、よろしくお願いします。

中央揃えalign-contentが効かない

graphvizをbrew経由でインストールしようとしたのですが、以下のエラーが出ました。

```ｚｓｈ
Error: python@3.9: the bottle needs the Apple Command Line Tools to be installed.
  You can install them, if desired, with:
    xcode-select --install

You can try to install from source with:
  brew install --build-from-source python@3.9
Please note building from source is unsupported. You will encounter build
failures with some formulae. If you experience any issues please create pull
requests instead of asking for help on Homebrew's GitHub, Twitter or any other
official channels.
```
しかし、Command line toolsはいぜんインストールしていたためおかしいと思い、確認したところ、入っておりました。
以下の方法で確認いたしました。

①sudo xcodebuild -licenseでの確認
Xcode and Apple SDKs Agreementから始まるライセンスが表示されました。

②xcodenのpreferenceでの確認
![イメージ説明](3f1afc0a6de8e56c1e615f4d2f4522f9.png)

③brew --config
この方法では確認できませんでした。
```zsh
HOMEBREW_VERSION: 3.0.5
ORIGIN: https://github.com/Homebrew/brew
HEAD: 8b677c0ddd5f96b5521c1b353a9ca07dfe57b80e
Last commit: 2 days ago
Core tap ORIGIN: https://github.com/Homebrew/homebrew-core
Core tap HEAD: c7e2ccbb9fd30c2782f334d5eeb5fba9a98827ed
Core tap last commit: 30 minutes ago
Core tap branch: master
HOMEBREW_PREFIX: /usr/local
HOMEBREW_CASK_OPTS: []
HOMEBREW_MAKE_JOBS: 8
Homebrew Ruby: 2.6.3 => /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby
CPU: octa-core 64-bit kabylake
Clang: 12.0 build 1200
Git: 2.24.3 => /Applications/Xcode.app/Contents/Developer/usr/bin/git
Curl: 7.64.1 => /usr/bin/curl
macOS: 11.2.3-x86_64
CLT: N/A
Xcode: 12.4
```

認識されていないのではと思います。



===============追記===================

```zsh
xcode-select --install
```
にて再インストールして一応は解決したのですが、原因がわからないためもやもやします。
現在Command line toolsが２つ別の場所にインストールされているのではないかや、そもそもどうしてインストールされていたはずのCommand line tools が認識されていなかったのかを解決したいです。