Webpack-dev-server isn't allowing CORS request

Question

I know this question has been asked before, but none of the answers are helping.

I'm using webpack-dev-server and I try a CORS request with JSON placeholder data (http://jsonplaceholder.typicode.com/) and everything works without a problem. But when I try it with a real API, it isn't working.

... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

However, when I try the url in Postman, it works as expected. Presumably Postman has some default settings that make this work.

Anyway, I try to change headers in webpack.config.js as follows:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }
  }

No luck.

I've seen all sorts of answers on the web. Some say it's impossible to do so (but then why does Postman allow it?). Others say it's a problem with the recent webpack versions. But I use older ones and the problem remains.

Surely there is a way to use APIs in an web app. Both with local server and production, no? Otherwise, what is the point of them?

Answer 1

It turns out this api requires the request be sent from a https.