'localhost:8080 always redirect to localhost:3000

I have a WordPress development environment with Docker. Is so simple, only a docker compose with Wordpress and MySQL.

This is my docker-compose file. All works perfect, and at first I can see my WordPress in localhost:8080

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

I also use Browser Sync with Gulp to live reload the site. I config in Browser Sync settings a proxy and then I can see my WordPress in localhost:3000 and my_local_ip:3000 with live reload.

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

The problem is that I made some changes in WordPress url settings (And then I restored it) but now the redirections works bad.

  • If I try to go to localhost:8080 or my_local_ip:3000 the browser always redirect to localhost:3000 and show a "too many redirects" error. (even with BrowserSync and Docker shutdown).

  • With Docker and BrowserSync running, my_local_ip:3000/wp-admin and localhost:3000/wp-admin works perfectly, but I can't see my blog. localhost:3000 always shows the error.

I already tried to clear the browsers cache, but not solve it. I don't now if is an error or a bad configuration of Docker, BrowserSync or MacOS (High Sierra is my OS)

wordpressmacosdockerlocalhostbrowser-sync


Solution 1:[1]

I ran into the same issue just now, and solved it. So here are my findings.

WordPress uses the Host header to determine where the traffic comes from and redirects it based on the configurations set.

Since you're using BrowserSync as proxy, BrowserSync sends a request to localhost:8080 with the Host header value as localhost:8080 instead of where you are sending your request from.

So first thing to do is have BrowserSync use the right host. We can grab the host from the original request like this

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

And next make sure that WordPress Address (URL) and Site Address (URL) url are set correctly in WP-Admin -> Settings -> General

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

That should do it. Worked for me, at least.

Solution 2:[2]

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

If you are using WordPress with Browsersync, this will do it. Thank you @software-person

Solution 3:[3]

Use this code for change Browsersync options:

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);
});

for more info https://browsersync.io/docs/options

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Software Person
Solution 2 user2893752
Solution 3

Related Questions