獲取基於 vue 和 apache 反向代理的相同基本 url

Question

我有一個 vue 應用程序，我正在使用 pm2 和 apache 進行測試。 一旦 pm2 啟動了應用程序並且應用程序在端口 3000 上運行，我就會使用 apache 反向代理來利用域和 https。 但是，當我需要使用基本 url 時，我想獲得相同的 base_url。

目前，我得到了這樣的 base_url

var base_url = window.location.origin;

在 vue 應用程序中使用時，這總是返回localhost:3000但由於 url 已被代理更改，因此返回的新 url 應為mydomain.com

我將如何檢測應用程序現在正在使用代理處理請求並在 vue 中返回正確的 base_url？

我的 Apache 配置文件

<VirtualHost *:80>


ServerAdmin info@mydomain.com


ServerName mydomain.com


ServerAlias www.mydomain.com


DocumentRoot /var/www/html

ProxyRequests Off

ProxyPreserveHost On

ProxyVia Full

<Proxy *>

Require all granted

</Proxy>

ProxyPass / http://localhost:3000/

ProxyPassReverse / http://localhost:3000/


ErrorLog ${APACHE_LOG_DIR}/error.log


CustomLog ${APACHE_LOG_DIR}/access.log combined


RewriteEngine on

RewriteCond %{SERVER_NAME} =mydomain.com [OR]

RewriteCond %{SERVER_NAME} =www.mydomain.com

RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

</VirtualHost>

Answer 1

您需要告訴 nginx 將 url 傳遞給您的 vue 應用程序。 你將需要使用這樣的東西（ nginx.conf ）：

location / {
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  proxy_set_header Host $http_host;
  proxy_set_header X-NginX-Proxy true;

  proxy_pass http://localhost:3000;
}

這些是使其工作所需的一些標頭。

或者，如果您使用的是 Apache，您可以添加此指令ProxyPreserveHost On並且它會起作用。