序文#
前回の水文構築 Mix-Space の記事を読んだ皆さんは、次の問題に遭遇したことがあるでしょうか。バックエンドでログインした後でも、フロントエンドはゲスト状態のままであることです。そのため、自分のウェブサイトでコメントを投稿することができません。以下のような感じです。
皆さんはこの問題に遭遇したことがあるかどうか分かりませんが、私は 3 回も経験しました
解決方法#
Shiro テーマでは、以下の方法で直接ログインできます。Kami はテストをあまり行っていないので、第 2 の方法を見ることをお勧めします。
直接ログイン(Shiro)#
開発者によると、左上のアバターをダブルクリックするだけでログインできます。
この方法を更新する際に、デモサーバーは既に削除されているため、友達のサイトをデモに使用しました
その後、ログインしてください。
API とフロントエンドを同じドメインに変更#
しかし、この認証はどのように行われるのでしょうか?ああ、とても簡単です。クッキーを使用していますが、フロントエンドとバックエンドの両方に mx-token
という名前のクッキーがあることがわかります。そして、その値はまったく同じです。
無効な箇所を隠すことはわかっていますので、指摘しないでください
この間、OAuth のメンバーリストを開発しているときにも、同じ問題が発生しました。つまり、バックエンドの API とフロントエンドが同じドメインでない場合、クッキーをクロスサイトで使用することはできません。また、バックエンドの API ディレクトリは /api/v2
ですので、API とフロントエンドを同じドメインに配置することはできるのではないでしょうか。
明らかに、宝塔はこのような操作を許可していません。
実際には、Nginx の設定ファイルを使用してこれを行うことができます。したがって、次のような操作を実現するために設定ファイルを編集できます。
完全な設定ファイルは以下の通りです。これをフロントエンドサイトのリバースプロキシ設定ファイルに置き換えるだけです(バックエンドをリバースプロキシにすることもできます)。
# See: https://github.com/mx-space/docker/blob/master/configs/nginx.conf
# This is a example for nginx configure if you host mx-space manually
location ~* \.(gif|png|jpg|css|js|woff|woff2)$ {
proxy_pass http://127.0.0.1:2323;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
expires 30d;
}
location ~* \/(feed|sitemap|atom.xml) {
proxy_pass http://127.0.0.1:2333/$1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
add_header Cache-Control max-age=60;
}
location / {
proxy_pass http://127.0.0.1:2323;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
add_header Cache-Control no-cache;
proxy_intercept_errors on;
}
location /api {
proxy_pass http://127.0.0.1:2333;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
add_header Cache-Control no-cache;
proxy_intercept_errors on;
}
location /qaqdmin {
proxy_pass http://127.0.0.1:2333;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
add_header Cache-Control no-cache;
proxy_intercept_errors on;
}
location /socket.io {
proxy_http_version 1.1;
proxy_buffering off;
proxy_set_header Upgrade
$http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass http://127.0.0.1:2333/socket.io;
}
保存したら、サイトに戻ります。まず、クッキーをすべてクリアします。
リロード後、フロントエンドドメイン/qaqdmin
に直接アクセスし、ログインします。
次に、設定 → システム → ウェブサイト設定に移動し、4 つの設定項目のドメインをすべてフロントエンドドメインに変更します。
変更が完了したら、右上の保存ボタンをクリックし、ホームページを開きます。親しみのあるウェルカムメッセージが表示されています。
コメントエリアを見てみましょう。
えっ?Vercel でフロントエンドを使用している場合はどうすればいいですか?
実際には、方法があります。こちらを参照してください
この記事は Mix Space からの同期更新です。
元のリンクは https://blog.nekorua.com/posts/build/73.html です。