Jak wygląda workflow przy tworzeniu aplikacji, gdzie oddzielnie jest front, a oddzielnie backend?

Na ten moment backend sobie działa na http://127.0.0.1:8000, a reactjs na http://localhost:4444/. Oczywiście webpack-dev-server ciągnie z index.html (który jest taki sam jak index.blade.php), bo chciałem móc używać webpack hot reload. Produkcyjnie nie będzie problemu, bo normalnie wszystko będzie przechodzić przez index.php w publicu będzie ciągnięte z widoku index.blade.php.

Używam https://github.com/sexyoung/laravel-react-webpack jak ktoś woli zajrzeć w kod.

Problem się pojawia jak chcę wykonać jakiś API call. Normalnie bym zrobił:

axios.get('/api/user/1')
  .then(function (response) {
    console.log(response);
  })

Ale ponieważ backend chodzi na innym porcie niż webpack-dev-server to musze zrobić tak:

axios.get('http://127.0.0.1:8000/api/user/1')
  .then(function (response) {
    console.log(response);
  })

Po pierwsze to nie działa, bo: No 'Access-Control-Allow-Origin' header is present on the requested resource., a po drugie nie chcę sobie hardcodować w kodzie http://127.0.0.1:8000/. Moglbym to przypisać do jakiejś zmiennej i produkcyjnie dać pusty string no ale..

Jak to rozwiązać? Jak wygląda workflow przy tworzeniu aplikacji, gdzie oddzielnie jest front, a oddzielnie backend?

Mogę pokazać, jak to mam zrobione w aurelii:

    constructor(http, config) {
        this.http = http;
        this.imageUrlBase = config.get('api.baseUrl') + '../media/thumb/user_avatar/';        
    }

    activate(params) {
        return this.http.get('users/' + params.id)
    }

a w config/application.json:

{
	"api": {
		"baseUrl": "https://localhost:9999/"
	}
}

Wielkie dzięki :) Cos pogrzebałem w configu webpacka i dziwnym trafem zaczęło działać jak z serwera (?) :4444 wywoałem /api/user/1 to jakimś cudem trafiło do :8080/api/user/1. Magia. Teraz tylko to zrozumieć.