question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How I can handle CORS on client-side

See original GitHub issue

I have a problem with connection to my server, which located at localhost:8080 I got the error with followeing message: Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NO51tSB' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Server-side code: const io = require("socket.io")(http, { cors: { origin: "http://localhost:8080", methods: ["GET", "POST"] } }); Client-side code: Vue.use(new VueSocketIO({ debug: true, connection: '//localhost:3000/', }))

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:3
  • Comments:12

github_iconTop GitHub Comments

37reactions
adongularcommented, Nov 30, 2020

i had this same issue but i solved it by following these steps

1=> in server side code update your connection and allow cors origin to *

io = require('socket.io')(httpServer, {
      cors: {
        origin: '*',
      }
    });

2 => Instead of connection string you must provide socket.io connection object

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

/* Establish Connection */
const socketConnection = SocketIO('http://localhost:3000');

Vue.use(new VueSocketIO({
    debug: true,
    connection:socketConnection 
  })
);

Hope this works for you as well

3reactions
iandreievcommented, Apr 22, 2021

i had this same issue but i solved it by following these steps

1=> in server side code update your connection and allow cors origin to *

io = require('socket.io')(httpServer, {
      cors: {
        origin: '*',
      }
    });

2 => Instead of connection string you must provide socket.io connection object

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

/* Establish Connection */
const socketConnection = SocketIO('http://localhost:3000');

Vue.use(new VueSocketIO({
    debug: true,
    connection:socketConnection 
  })
);

Hope this works for you as well

Thank’s a lot)

Read more comments on GitHub >

github_iconTop Results From Across the Web

CORS - Is it a client-side thing, a server-side ... - Stack Overflow
CORS is applied to requests when an Origin header is included in the request. This includes requests made from JavaScript and POST requests....
Read more >
Handle CORS Client-side - gists · GitHub
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain...
Read more >
Handling CORS in Web Applications - How-To Geek
Although CORS is a browser technology, you can't directly influence it with client-side code. This prevents malicious scripts from side-stepping ...
Read more >
Part 1. Introducing CORS - CORS in Action - liveBook · Manning
CORS is a unique web technology in that it has both a server-side and a client-side component. The server-side component configures which types...
Read more >
Cross-Origin Resource Sharing (CORS) - MDN Web Docs
For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found