Webpack-dev-server: headers not added in preflight-requests (OPTIONS)

[BowlingX]

I'm using the proxy option to proxy requests to my API. Additionally I did setup the following headers:

headers: {
            'Access-Control-Allow-Origin': '*'
        }

The header is only set in GET, POST etc. requests, but not on preflight requests, that yields to an error in Chrome:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[edanweis]

I have this issue with Angular2 and Neo4j. Can you suggest a workaround?

[matteotosi]

@BowlingX do you handle the requests of type OPTIONS (the preflight requests sent to the server before every other kind of request)?

[SpaceK33z]

@BowlingX, do you still have this issue in 1.15.0?

[SpaceK33z]

I'm closing this issue because of inactivity. Feel free to comment, and we can always re-open it again.

[davidpelayo]

Same happens here. version 1.16.3.

[kimown]

Hi, you can try this config if anybody meet the same problem

{
  hot: true,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true',
    'Access-Control-Max-Age': '3600',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization, x-id, Content-Length, X-Requested-With',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS'
  },
  proxy: {
    '/api': {
      'target': {
        host: 'localhost',
        protocol: 'http',
        port: 3101
      },
      secure: false,
      bypass: function (req, res, proxyOptions) {
        console.info(req.method + req.originalUrl)
        if (req.method === 'OPTIONS') {
          res.statusCode = 200
          return 'a' // I don't know the purpose of this line, but indeed it works
        }
      }
    }
  },
}

localhost:3101 is koa server, webpack dev server is localhost:8888.

How to test:

axios.post('http://localhost:8888/api/json',{aa:111})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

1.Preflighted_requests

2.The real POST request, you can get koa server response data