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?