title: vue socket.io connection attempt returning "No 'Access-Control-Allow-Origin' header is present" error even when origins have been set
body: <p>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</p>
  
  <p>I have been debugging this myself to my best efforts and have tried basically everything I can think of.</p>
  
  <p>In the node.js server I have set origins with</p>
  
  <pre><code>let io = require('socket.io')(http, {origins: '*:* agora.dev:*'})
  </code></pre>
  
  <p>and then I listen for connections with </p>
  
  <pre><code>io.on('connection', (socket)=&gt;{
      console.log('connection received')
  })
  </code></pre>
  
  <p>but no connection ever comes. And in the console of the vue app page all I get is these 404 errors saying</p>
  
  <p><a href="https://gyazo.com/0197aaa3d12ba37d852d3d4b136f2afa" rel="nofollow noreferrer">https://gyazo.com/0197aaa3d12ba37d852d3d4b136f2afa</a></p>
  
  <blockquote>
    <p>agora.dev/:1 XMLHttpRequest cannot load
    <a href="http://agoraserver.dev/socket.io/?EIO=3&amp;transport=polling&amp;t=Lwj7pq6" rel="nofollow noreferrer">http://agoraserver.dev/socket.io/?EIO=3&amp;transport=polling&amp;t=Lwj7pq6</a>.
    No 'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://agora.dev" rel="nofollow noreferrer">http://agora.dev</a>' is therefore not allowed access.
    The response had HTTP status code 404.</p>
  </blockquote>
  
  <p>I'm using the vue.js webpack template, and the vue-socket.io package and socket.io-client package too.</p>
  
  <p>So my main.js vue app file looks like so</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>I've even gone and changed my localhost environment to a domain one via /etc/hosts because of this question on the topic <a href="https://stackoverflow.com/questions/30142590/no-access-control-allow-origin-header-is-present">No &#39;Access-Control-Allow-Origin&#39; header is present</a></p>
  
  <p>But that hasn't fixed it either.</p>
  
  <p>I really can't think of anything else.</p>
  
  <p>I even enabled CORS on the agoraserver middleware but... that's not really what this is about</p>
  
  <pre><code>//ENABLE CORS
  app.all('/', function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
      next();
  });
  </code></pre>
  
  <p>And I've also added a websocket proxy to the apache config, if you recomend moving to nginx, please let me know</p>
  
  <pre><code>&lt;VirtualHost *:80&gt;
      ServerAdmin ireply@myleisure.com.au
      DocumentRoot "/Users/Nik/Dropbox/host-root/var/www/nodes/agora"
      ServerName agoraserver.dev
          &lt;Directory /&gt;
                  Options -indexes +FollowSymLinks
                  AllowOverride None
                  Require all granted
          &lt;/Directory&gt;
  
          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
          &lt;Proxy "*"&gt;
                  Require all granted
          &lt;/Proxy&gt;
          ProxyPass / "http://127.0.0.1:9999/"
          ProxyPassReverse / "http://127.0.0.1:9999/"
  
  &lt;/VirtualHost&gt;
  </code></pre>
  
  <p>socket.io doesn't seem to be setting the right headers. I've console.log(io.origins()) and it returns the proper origins string.</p>
  
  <p>Thank you for any help</p>
  
  <p>edit:</p>
  
  <p>So I made a little bit of progress, I manually set the headers in the apache vhost config file.</p>
  
  <p>like so ( and I had to set Credentials to true because it spat an error due to that too) :</p>
  
  <pre><code>    &lt;IfModule mod_headers.c&gt;
              Header set Access-Control-Allow-Origin: 'http://agora.dev'
              Header set Access-Control-Allow-Credentials true
      &lt;/IfModule&gt;
  </code></pre>
  
  <p>But I still get this error in the console </p>
  
  <pre><code>GET http://agoraserver.dev/socket.io/?EIO=3&amp;transport=polling&amp;t=LwjHMHH 404 (Not Found)
  </code></pre>
  
  <p>What the is going on...</p>
  
  <p>I'm using socket.io version ^2.0.3 on both client and server by the way..</p>