CORS issue when using hot reload
alfredvaa opened this issue · 7 comments
Starting a fresh clone of the project, with foreman start -f Procfile.hot gives me this in the Chrome console.
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
@alfredvaa Are you sure this is 100% vanilla from a git clone? We're not seeing this in our CI setup.
I tried to fix this in my last PR with no success. The errors are caused by whatever broke hot module replacement with Webpack 2. The full error for me is:
Failed to load resource: the server responded with a status of 504 (Gateway Timeout)
Failed to load http://localhost:3035/webpack/info?t=1511276146767: The value of
the 'Access-Control-Allow-Origin' header in the response must not be the
wildcard '*' when the request's credentials mode is 'include'. Origin
'http://localhost:5000' is therefore not allowed access. The credentials
mode of requests initiated by the XMLHttpRequest is controlled by the
withCredentials attribute.
[WDS] Disconnected!
With the last error there is a stack trace from the Webpack Dev Server disconnect.
It looks like this is a CORS problem which is preventing the port 5000 Rails server from loading from the port 3035 webpack-dev-server, thus breaking hot reloading.
In the terminal, the error is:
[HPM] Error occurred while trying to proxy request /webpack/info?t=1511276921370
from localhost:3035 to http://localhost:3035 (ENOTFOUND)
(https://nodejs.org/api/errors.html#errors_common_system_errors)
I found a bunch of issues related to these kinds of CORS errors with Webpack, but I couldn't get any of the proposed patches to work. It seemed like there was more than one kind of problem that was causing this for other users, and I am still working on trying to figure out which one we have. I'll pull together what I have learned and post it here later.
Here is a recent webpack-dev-server issue #793 that seems to describe this problem.
Some of the comments suggested that this was only showing up as an error on OS X. I am on OS X only, so I couldn't test this.
@alfredvaa and @justin808, I would be interested to know if we are all on OS X, or if non-OS X react_on_rails users have working from the latest commits on other platforms.
It seems like some of the more successful commenters were able to get this fixed by changing the syntax of the WebpackDevServer proxy object, which is in client/server-rails-hot.js line 22.
I took a quick crack at this approach and it seemed promising, but I wasn't able to make these changes without breaking all the hot reloading URL's. Perhaps this would be an easy fix for someone who knows the internals better than I?
Here is the webpack-dev-server stacktrace from when it disconnects:
msgClose @ client?a8b2:164
onclose @ socket.js?e5d0:16
EventTarget.dispatchEvent @ eventtarget.js?d62b:51
(anonymous) @ main.js?8e93:356
setTimeout (async)
SockJS._close @ main.js?8e93:344
SockJS._receiveInfo @ main.js?8e93:177
g @ emitter.js?a8c1:30
EventEmitter.emit @ emitter.js?a8c1:50
(anonymous) @ info-receiver.js?aa33:67
g @ emitter.js?a8c1:30
EventEmitter.emit @ emitter.js?a8c1:50
(anonymous) @ info-ajax.js?7213:37
g @ emitter.js?a8c1:30
EventEmitter.emit @ emitter.js?a8c1:50
xhr.onreadystatechange @ abstract-xhr.js?c769:124
XMLHttpRequest.send (async)
AbstractXHRObject._start @ abstract-xhr.js?c769:132
(anonymous) @ abstract-xhr.js?c769:21
setTimeout (async)
AbstractXHRObject @ abstract-xhr.js?c769:20
XHRCorsObject @ xhr-cors.js?4391:8
InfoAjax @ info-ajax.js?7213:19
InfoReceiver._getReceiver @ info-receiver.js?aa33:39
InfoReceiver.doXhr @ info-receiver.js?aa33:56
(anonymous) @ info-receiver.js?aa33:25
setTimeout (async)
InfoReceiver @ info-receiver.js?aa33:24
SockJS @ main.js?8e93:121
socket @ socket.js?e5d0:9
(anonymous) @ client?a8b2:200
(anonymous) @ client?a8b2:242
(anonymous) @ vendor-bundle-4309b8…553f7a43f5c.js:5433
__webpack_require__ @ vendor-bundle-4309b8…a553f7a43f5c.js:713
fn @ vendor-bundle-4309b8…a553f7a43f5c.js:118
532 @ app-bundle-4309b8a….js:145
__webpack_require__ @ vendor-bundle-4309b8…a553f7a43f5c.js:713
webpackJsonpCallback @ vendor-bundle-4309b8a….js:26
(anonymous) @ app-bundle-4309b8a….js:1
msgClose | @ | client?a8b2:164
-- | -- | --
| onclose | @ | socket.js?e5d0:16
| EventTarget.dispatchEvent | @ | eventtarget.js?d62b:51
| (anonymous) | @ | main.js?8e93:356
| setTimeout (async) | |
| SockJS._close | @ | main.js?8e93:344
| SockJS._receiveInfo | @ | main.js?8e93:177
| g | @ | emitter.js?a8c1:30
| EventEmitter.emit | @ | emitter.js?a8c1:50
| (anonymous) | @ | info-receiver.js?aa33:67
| g | @ | emitter.js?a8c1:30
| EventEmitter.emit | @ | emitter.js?a8c1:50
| (anonymous) | @ | info-ajax.js?7213:37
| g | @ | emitter.js?a8c1:30
| EventEmitter.emit | @ | emitter.js?a8c1:50
| xhr.onreadystatechange | @ | abstract-xhr.js?c769:124
| XMLHttpRequest.send (async) | |
| AbstractXHRObject._start | @ | abstract-xhr.js?c769:132
| (anonymous) | @ | abstract-xhr.js?c769:21
| setTimeout (async) | |
| AbstractXHRObject | @ | abstract-xhr.js?c769:20
| XHRCorsObject | @ | xhr-cors.js?4391:8
| InfoAjax | @ | info-ajax.js?7213:19
| InfoReceiver._getReceiver | @ | info-receiver.js?aa33:39
| InfoReceiver.doXhr | @ | info-receiver.js?aa33:56
| (anonymous) | @ | info-receiver.js?aa33:25
| setTimeout (async) | |
| InfoReceiver | @ | info-receiver.js?aa33:24
| SockJS | @ | main.js?8e93:121
| socket | @ | socket.js?e5d0:9
| (anonymous) | @ | client?a8b2:200
| (anonymous) | @ | client?a8b2:242
| (anonymous) | @ | vendor-bundle-4309b8…553f7a43f5c.js:5433
| __webpack_require__ | @ | vendor-bundle-4309b8…a553f7a43f5c.js:713
| fn | @ | vendor-bundle-4309b8…a553f7a43f5c.js:118
| 532 | @ | app-bundle-4309b8a….js:145
| __webpack_require__ | @ | vendor-bundle-4309b8…a553f7a43f5c.js:713
| webpackJsonpCallback | @ | vendor-bundle-4309b8a….js:26
| (anonymous) | @ | app-bundle-4309b8a….js:1
@reconstructions I am also on OSX, 10.12.6 if it matters.
I am having this error too and the webpack fixes don't work for me. I am running linux