[Vuejs]-Laravel vuejs socket.io Access-Control-Allow-Origin

by

0👍

The error you’re receiving is due a feature from browsers called preflight that consists in the browser doing kind of "ping request" to the server that you want to access with an HTTP OPTIONS to get the response headers and check for the Access-Control-Allow-Origin header.

The idea is that your API should declare in this header which origins(domains) are allowed to consume your resources/APIs.

The "easiest" way to resolve this is to configure your API to respond with Access-Control-Allow-Origin: *.
But it’s not the correct way, you shouldn’t go to production * as configuration.

In my opinion the correct way to resolve this is use a http proxy while in dev, and in production you configure your Apache or NGINX or whatever http server you’ll use to do so.

If you’re using @vue/cli, it already has an option to configure a proxy server for development, take a look in the docs.

But fastforwarding the refactoring needed if you use the devProxy option, you will basically map an resource/context in the same server/port which is served you front-end to proxy requests/connections to your websocket.

Then you’ll stop calling the http://localhost:3000 directly and will use the mapped resource/context.

For example:

In your vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:300',
        ws: true
      }
    }
  }
}

Then you will create the socket:

var socket = io(`${location.protocol}//${location.host}/api`);

Being honest with you, I’ve never used the devProxy with websockets, but the docs says it has support for it.

Leave a comment