Webpack-dev-server: Headers (e.g. Access-Control-Allow-Origin) on requests to contentBase

[tdeekens]

Hi,

I've jumped onto webpack and the webpack-dev-server quite recently and have been really enjoying developing with it.

Lately I ran into a scenario in which we have multiple (3-4) sub-projects all running an own webpack-dev-server on different ports. The bundles are then included in on one of the projects (being served over a dev-server) having an aggregating index.html including the other projects' bundles. Whenever another sub-project now starts requesting resources over its contentBase it obviously runs into CORS issues as its not running under the same port.

I've seen the dev-server having a header configuration option. Still, as far as I understand, this header is only for a request to the bundle not the index.html nor any other static resources which are being served via serveMagicHtml() in the lib/Server.js. Is there any way of accomplishing this through configuration or is it a scenario which is just not intended?

Cheers.

[jhnns]

The magicHtml is only for situations where you don't have an own index.html. If you're serving your own index.html you should be using the contentBase-option to specify the url of your own http server.

For instance: If your static http server runs on the same host on port 3000 you should run the webpack-dev-server with webpack-dev-server --content-base 3000. With your own http server you should be free to set all the required headers.

Hope my explanation is correct, haven't been tracking all the changes to the webpack-dev-server lately :grinning:

[tdeekens]

Thanks for the response! I understand what you're saying still..

That's what I am doing. I am starting the webpack dev sever as in ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --content-base --port 9500 --colors.

The webpack.config.js has a

...
devServer: {
   headers: { "Access-Control-Allow-Origin": "*" }
}
...

header which is sent when ever the bundle is requested over localhost:9500/app.bundle.js. Still the root of localhost:9500 does not have the header set. I can obviously hardcode it into the Server.js which would make it work. Still those headers I pass in should be set on any resources requested and accessible from the content-base, correct?

Is there any other way of setting headers on the content-base's index.html?

[jhnns]

If your contentBase is either a port or a url, webpack-dev-server is just proxying all the requests to this address, so headers should be set by the http server behind the contentBase.

But I admit: If you set headers, they should be applied on all the other requests too (not just bundle-requests). @sokra what do you think?

@tdeekens you could open a pull-request:

app.get("/*", function(req, res, next) {
    res.setHeader(...);
    next();
});

[tdeekens]

...alrighty. I will fork and open a pull request - it'll also better communicate what I am after.

[crucialfelix]

You can close this now. PR was merged.

[jhnns]

Thx

[JulianIsrael]

I think this is still happening for me, I'm currently on 1.16.2

[aegyed91]

i think i still got this problem as well

  config.devServer = {
    contentBase: AOT ? './src/compiled' : './src',
    port: CONSTANTS.PORT,
    historyApiFallback: {disableDotRule: true},
    host: '0.0.0.0',
    headers: { 'Access-Control-Allow-Origin': '*' },
    watchOptions: DEV_SERVER_WATCH_OPTIONS
  };

XMLHttpRequest cannot load http://localhost:3030/api/v1/cli/ssh. Redirect from 'http://localhost:3030/api/v1/cli/ssh' to 'http://localhost:3000/offline.html' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Request URL:http://localhost:3030/api/v1/cli/ssh
Request Method:GET
Status Code:307 OK (from ServiceWorker)
Remote Address:127.0.0.1:3000

Response Headers
location:http://localhost:3000/offline.html

Request Headers
Provisional headers are shown
Referer:http://localhost:3000/cli/add-project
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36

if (evt.request.headers.get('x-sw') === SW_TYPES.nav) {
    evt.respondWith(Response.redirect('/offline.html', 307));
  }

[sheprdinc]

i'm using axios, but could use fetch... to be honest, i care far more about why this issue is happening in production rather than in dev mode, but unfortunately all of my google searches return solutions only for devServer ... any one figured this out with a production setting in webpack? this cors issue is killing me, trying to get data from google maps api using restful endpoint, gmaps library not an option

[yanlee26]

How about chrome's extensions??