localhost:8080 總是重定向到 localhost:3000

Question

我有一個帶有 Docker 的 WordPress 開發環境。 就是這么簡單，只需要一個docker compose with Wordpress 和MySQL。

這是我的 docker-compose 文件。 一切都很完美，起初我可以在localhost:8080中看到我的 WordPress

version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    volumes:
      - /Users/ivan/Developer/theme:/var/www/html/wp-content/themes/theme
    environment:
      WORDPRESS_DB_PASSWORD: password

  mysql:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password

我還使用帶有 Gulp 的Browser Sync來實時重新加載網站。 我在瀏覽器同步設置中配置了一個代理，然后我可以在localhost:3000和my_local_ip :3000 中看到我的 WordPress 並實時重新加載。

browsersync: {
    browser: 'google chrome',
    proxy: "localhost:8080",
},

問題是我對 WordPress url 設置進行了一些更改（然后我恢復了它），但現在重定向效果不佳。

• 如果我嘗試轉到 localhost:8080 或my_local_ip :3000 瀏覽器總是重定向到 localhost:3000 並顯示“重定向過多”錯誤。 （即使 BrowserSync 和 Docker 關閉）。

• 隨着 Docker 和 BrowserSync 的運行， my_local_ip :3000/wp-admin 和 localhost:3000/wp-admin可以完美運行，但是我看不到我的博客。 localhost:3000 總是顯示錯誤。

我已經嘗試清除瀏覽器緩存，但沒有解決。 我現在不知道Docker 、 BrowserSync或MacOS是否有錯誤或錯誤配置（High Sierra 是我的操作系統）

Answer 1

我剛才遇到了同樣的問題，並解決了。 所以這是我的發現。

WordPress 使用Host標頭來確定流量的來源，並根據配置集對其進行重定向。

由於您使用 BrowserSync 作為代理，BrowserSync 向localhost:8080發送請求，其中Host標頭值為localhost:8080而不是您發送請求的位置。

所以首先要做的是讓 BrowserSync 使用正確的主機。 我們可以像這樣從原始請求中獲取主機

proxy: {
    target: 'http://localhost:8080/',
    proxyReq: [
        function(proxyReq, req, res) {
                proxyReq.setHeader('Host', req.headers.host);
        }
    ]
},

接下來確保在WP-Admin -> Settings -> General中正確設置了WordPress Address (URL)和Site Address (URL) url

[host:port]/wp-admin/options-general.php

那應該這樣做。 至少為我工作。

Answer 2

target: 'http://localhost:8080/',
proxyReq: [
    function(proxyReq, req, res) {
            proxyReq.setHeader('Host', req.headers.host);
    }
]

如果您將 WordPress 與 Browsersync 一起使用，則可以這樣做。 謝謝@軟件人

Answer 3

使用此代碼更改 Browsersync 選項：

const browserSync = require('browser-sync').create(); // npm install browser-sync --save-dev

const
// source and build folders
dir = {
  watch: 'source-theme/',
  build: 'build-theme/'
},

// Browsersync options:
const syncOpts = {
  port: 3000, 
  proxy: 'http://mywebsite.ss',
  files: dir.watch + '**/*',
  open: true,
  notify: false,
  ghostMode: false,
  ui: {
    port: 8001, //default port 8080
    weinre: {
        port: 8002 //default weinre port 9090
    }
  },
};

// browser-sync task
gulp.task('browserSync', () => {
  browserSync.init(syncOpts);
});

更多信息https://browsersync.io/docs/options