vue socket.io 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('socket.io')(http, {origins: '*:* agora.dev:*'})

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

https://gyazo.com/0197aaa3d12ba37d852d3d4b136f2afa

agora.dev/:1 XMLHttpRequest cannot load http://agoraserver.dev/socket.io/?EIO=3&transport=polling&t=Lwj7pq6. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://agora.dev' is therefore not allowed access. The response had HTTP status code 404.

I'm using the vue.js webpack template, and the vue-socket.io package and socket.io-client 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 'socket.io-client'
import VueSocketIo from 'vue-socket.io'
var SocketInstance = socketio('http://agoraserver.dev')
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

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

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

<VirtualHost *:80>
    ServerAdmin ireply@myleisure.com.au
    DocumentRoot "/Users/Nik/Dropbox/host-root/var/www/nodes/agora"
    ServerName agoraserver.dev
        <Directory />
                Options -indexes +FollowSymLinks
                AllowOverride None
                Require all granted
        </Directory>

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

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

</VirtualHost>

socket.io doesn't seem to be setting the right headers. I've console.log(io.origins()) and it returns the proper origins string.

Thank you for any help

edit:

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: 'http://agora.dev'
            Header set Access-Control-Allow-Credentials true
    </IfModule>

But I still get this error in the console

GET http://agoraserver.dev/socket.io/?EIO=3&transport=polling&t=LwjHMHH 404 (Not Found)

What the is going on...

I'm using socket.io version ^2.0.3 on both client and server by the way..

回答1:

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

来源：https://stackoverflow.com/questions/46376277/vue-socket-io-connection-attempt-returning-no-access-control-allow-origin-hea

标签

node.js

sockets

Socket.IO

Vue.js