CORS/ vue proxy error

I’m trying to send a post request via axios with {withCredentials: true} because I need to allow for cookies but I keep getting:

Access to XMLHttpRequest at 'http://my.madeupsite.com/api/login' from origin 
'http://localhost:8080' has been blocked by CORS policy: Response to preflight request 
doesn't pass access control check: 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'. The credentials mode of requests initiated by the XMLHttpRequest is 
controlled by the withCredentials attribute.

I’ve tried to fix it by setting devServer.proxy as per this suggestion,

module.exports = {
    // options...
    devServer: {
        proxy: {
           'http://my.madeupsite.com/',
      }
     }
  }

but I keep getting:

POST http://localhost:8080/api/login 404 (Not Found)

I also tried adding Access-Control-Allow-Origin': 'http://my.madeupsite.com', to headers but I still got the original CORS error.

Anybody know how I can solve this CORS problem?
Thanks so much!

This is a server configuration. http://my.madeupsite.com/api/login must grant CORS access to http://localhost:8080.

There are two different approaches here. One is to proxy requests through the dev server, the other is to use CORS. This is an important design decision that has implications for the application in production. You should do some research and make sure you understand the difference between the two approaches and make an informed decision about which is best for your application. I do not recommend going with ‘whatever works’ as you’ll likely run into problems further down the line if you choose the wrong approach.

For CORS, it looks like your server is returning Access-Control-Allow-Origin: *, which isn’t allowed for requests that use withCredentials: true because it’s a massive security hole. The server will also need to return Access-Control-Allow-Credentials: true. Note that these are response headers and they need to be set on the server, you can’t set them in your client code.

As for using devServer.proxy, that solves the problem in a different way. CORS is only required for requests to a different origin and if you use proxying then the requests won’t be to a different origin. This will only fix the problem during development though, in production you’d need to configure proxying again or you’ll just be right back where you started.

The devServer.proxy configuration you posted is not valid. You seem to have a string directly inside an object, which isn’t valid JavaScript. Perhaps you meant proxy: 'http://my.madeupsite.com/' (without the braces) instead? Even better would be to limit the proxy to requests starting with /api, assuming all your requests use that as a prefix.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://my.madeupsite.com/',
        changeOrigin: true
      }
    }
  }
}

You may also need pathRewrite depending on how the paths relate to each other.

Make sure you restart the dev server after changes.

2 Likes

@JamesThomson and @skirtle thanks so much for your help and suggestions!

I ended up adding to proxyTable in index.js in config folder and it worked:

proxyTable: {
      '/api': {
        target: 'http://my.madeupsite.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }