vue connection attempt returning "No 'Access-Control-Allow-Origin' header is present" error even when origins have been set


I’ve been trying to debug this for a couple of days now, I’ve had experience with sockets on 1 other app but it was on the same domain, I didn’t think I’d have this much trouble with a cross domain vue.js app though

I have been debugging this myself to my best efforts and have tried basically everything I can think of.

In the node.js server I have set origins with

let io = require('')(http, {origins: '*:**'})

and then I listen for connections with

io.on('connection', (socket)=>{
    console.log('connection received')

but no connection ever comes. And in the console of the vue app page all I get is these 404 errors saying XMLHttpRequest cannot load
No ‘Access-Control-Allow-Origin’ header is present on the requested
resource. Origin ‘‘ is therefore not allowed access.
The response had HTTP status code 404.

I’m using the vue.js webpack template, and the package and package too.

So my main.js vue app file looks like so

import Vue from 'vue'
import App from './App'
import router from './router'
import socketio from ''
import VueSocketIo from ''
var SocketInstance = socketio('')
Vue.use(VueSocketIo, SocketInstance)

I’ve even gone and changed my localhost environment to a domain one via /etc/hosts because of this question on the topic No 'Access-Control-Allow-Origin' header is present

But that hasn’t fixed it either.

I really can’t think of anything else.

I even enabled CORS on the agoraserver middleware but… that’s not really what this is about

app.all('/', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");

And I’ve also added a websocket proxy to the apache config, if you recomend moving to nginx, please let me know

<VirtualHost *:80>
    DocumentRoot "/Users/Nik/Dropbox/host-root/var/www/nodes/agora"
        <Directory />
                Options -indexes +FollowSymLinks
                AllowOverride None
                Require all granted

        RewriteEngine On
        RewriteCond %{HTTP:Upgrade} =websocket [NC]
        RewriteRule /(.*) ws://$1 [P,L]
        RewriteCond %{HTTP:Upgrade} !=websocket [NC]
        RewriteRule /(.*)$1 [P,L]

        ProxyRequests Off
        ProxyPreserveHost On
        ProxyVia Full
        <Proxy "*">
                Require all granted
        ProxyPass / ""
        ProxyPassReverse / ""

</VirtualHost> doesn’t seem to be setting the right headers. I’ve console.log( and it returns the proper origins string.

Thank you for any help


So I made a little bit of progress, I manually set the headers in the apache vhost config file.

like so ( and I had to set Credentials to true because it spat an error due to that too) :

    <IfModule mod_headers.c>
            Header set Access-Control-Allow-Origin: ''
            Header set Access-Control-Allow-Credentials true

But I still get this error in the console

GET 404 (Not Found)

What the is going on…

I’m using version ^2.0.3 on both client and server by the way..


so it turns out that all I needed to do was listen on http instead of app

Answered By – J Doe

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.