Socket io Node js Cross-Origin Request Blocked

Question

I m using node and socket io to write a chat application  It works fine on Chrome but mozilla gives an error to enable the Cross-Origin Requests      Cross-Origin Request Blocked  The Same Origin Policy disallows reading the remote resource at http   waleedahmad kd io 3000 socket io  EIO 2 amp transport polling amp t 1401964309289-2 amp sid 1OyDavRDf4WErI-VAAAI  This can be fixed by moving the resource to the same domain or enabling CORS    Here s my code to start node server   var express   require  express        app   express         server   require  http   createServer app       io   require  socket io   listen server       path   require  path    server listen 3000    app get      function req  res        res sendfile   dirname     public index html          On the client side   var socket   io connect    waleedahmad kd io 3000       Script tag on HTML page    lt script type  text javascript  src    waleedahmad kd io 3000 socket io socket io js  gt  lt  script gt    I m also using  htaccess file in the app root directory   waleedahmad kd io node    Header add Access-Control-Allow-Origin     Header add Access-Control-Allow-Headers  origin  x-requested-with  content-type  Header add Access-Control-Allow-Methods  PUT  GET  POST  DELETE  OPTIONS

User · Answer

I tried above and nothing worked for me  Following code is from socket io documentation and it worked   io origins  origin  callback    gt      if  origin      https   foo example com           return callback  origin not allowed   false         callback null  true

User · Answer

If you are getting io set not a function or io origins not a function  you can try such notation  import express from  express   import   Server   from  socket io   const app   express    const server   app listen 3000   const io   new Server server    cors    origin

User · Answer

Take a look at this  Complete Example Server  let exp   require  express    let app   exp       UPDATE  this is seems to be deprecated   let io   require  socket io   listen app listen 9009      New Syntax  const io   require  socket io   app listen 9009     app all      function  request  response  next        response header  quot Access-Control-Allow-Origin quot    quot   quot        response header  quot Access-Control-Allow-Headers quot    quot X-Requested-With quot        next         Client   lt  --LOAD THIS SCRIPT FROM SOMEWHERE-- gt   lt script src  quot http   127 0 0 1 9009 socket io socket io js quot  gt  lt  script gt   lt script gt      var socket   io  quot 127 0 0 1 9009  quot              quot force new connection quot   true           quot reconnectionAttempts quot    quot Infinity quot             quot timeout quot   10001            quot transports quot     quot websocket quot                     lt  script gt   I remember this from the combination of stackoverflow answers many days ago  but I could not find the main links to mention them

User · Answer

This could be a certification issue with Firefox  not necessarily anything wrong with your CORS  Firefox CORS request giving   39 Cross-Origin Request Blocked  39  despite headers  I was running into the same exact issue with Socketio and Nodejs throwing CORS error in Firefox  I had Certs for   myNodeSite com  but I was referencing the LAN IP address 192 168 1 10 for Nodejs   WAN IP address might throw the same error as well   Since the Cert didn t match the IP address reference  Firefox threw that error

User · Answer

I am facing problem while making an chat app using socket io and node js  amp  React  Also this issue is not spacefic to Firefox browser  i face same issue in Edge  amp  Chrome also       Cross-Origin request is blocked and it is used by some other resources       Then i download cors in project directory and put it in the server file index js as below  To download simply type command using node js        npm install cors   const cors   require  cors    app use cors       This will allow CORS to used by different resources in the files and allow cross origin request in the browser

User · Answer

For anyone looking here for new Socket io  3 x  the migration documents are fairly helpful  In particular this snippet  const io   require  quot socket io quot   httpServer      cors        origin   quot https   example com quot       methods    quot GET quot    quot POST quot        allowedHeaders    quot my-custom-header quot        credentials  true

User · Answer

I am using v2 1 0 and none of the above answers worked for me   This did though   import express from  express   import http from  http    const app   express    const server   http createServer app    const sio   require  socket io   server        handlePreflightRequest   req  res    gt            const headers                  Access-Control-Allow-Headers    Content-Type  Authorization                Access-Control-Allow-Origin   req headers origin    or the specific origin you want to give access to               Access-Control-Allow-Credentials   true                    res writeHead 200  headers           res end               sio on  connection        gt        console log  Connected          server listen 3000

User · Answer

Alright I had some issues getting this to work using a self signed cert for testing so I am going to copy my setup that worked for me  If your not using a self signed cert you probably wont have these issues  hopefully   To start off depending on your browser Firefox or Chrome you may have different issues and I ll explain in a minute    First the Setup   Client     May need to load the client script from a Absolute Path  lt script src  https   www YOURDOMAIN com node node modules socket io-client dist socket io js  gt  lt  script gt   lt script gt  var options               rememberUpgrade true            transports    websocket              secure true             rejectUnauthorized  false                 var socket   io connect  https   www YOURDOMAIN com PORT   options       Rest of your code here  lt  script gt    Server  var fs   require  fs     var options       key  fs readFileSync   path to your file pem      cert  fs readFileSync   path to your file crt        var origins    https   www YOURDOMAIN com     var app   require  https   createServer options function req res           Set CORS headers     res setHeader  Access-Control-Allow-Origin    https   www YOURDOMAIN com          res setHeader  Access-Control-Request-Method             res setHeader  Access-Control-Allow-Methods    OPTIONS  GET        res setHeader  Access-Control-Allow-Headers             if   req method      OPTIONS     req method      GET              res writeHead 200           res end            return                      var io   require  socket io   app    app listen PORT     For development the options used on the client side are ok in production you would want the option    rejectUnauthorized  false   You would more than likely want set to  true   Next thing is if its a self signed cert you will need to vist your server in a separate page tab and accept the cert or import it into your browser     For Firefox I kept getting the error   MOZILLA PKIX ERROR SELF SIGNED CERT   The solution for me was to add the following options and accepting the cert in a different page tab      rejectUnauthorized  false      In Chrome I had to open another page and accept the cert but after that everything worked fine with out having to add any options   Hope this helps   References   https   github com theturtle32 WebSocket-Node issues 259  https   github com socketio engine io-client methods

User · Answer

You can try to set origins option on the server side to allow cross-origin requests   io set  origins    http   yourdomain com 80      Here http   yourdomain com 80 is the origin you want to allow requests from   You can read more about origins format here

User · Answer

I just wanted to say that after trying a bunch of things  what fixed my CORS problem was simply using an older version of socket io  version 2 2 0   My package json file now looks like this       quot name quot    quot current-project quot      quot version quot    quot 1 0 0 quot      quot description quot    quot  quot      quot main quot    quot index js quot      quot scripts quot          quot devStart quot    quot nodemon server js quot          quot author quot    quot  quot      quot license quot    quot ISC quot      quot dependencies quot          quot socket io quot    quot  2 2 0 quot          quot devDependencies quot          quot nodemon quot    quot  1 19 0 quot           If you execute npm install with this  you may find that the CORS problem goes away when trying to use socket io  At least it worked for me

User · Answer

I used version 2 4 0 of socket io in easyRTC and used the following code in server ssl js which worked for me io   require  quot socket io quot   webServer      handlePreflightRequest   req  res    gt        res writeHead 200           quot Access-Control-Allow-Origin quot   req headers origin         quot Access-Control-Allow-Methods quot    quot GET POST OPTIONS quot          quot Access-Control-Allow-Headers quot    quot Origin  X-Requested-With  Content-Type  Accept  Referer  User-Agent  Host  Authorization quot          quot Access-Control-Allow-Credentials quot   true         quot Access-Control-Max-Age quot  86400             res end

User · Answer

Sometimes this issue is faced when the node server stoped  So  check if your node server working ok  Then you can use io set  origins    http   yourdomain com PORT NUMBER

User · Answer

I had the same problem and any solution worked for me  The cause was I am using allowRequest to accept or reject the connection using a token I pass in a query parameter  I have a typo in the query parameter name in the client side  so the connection was always rejected  but the browser complained about cors    As soon as I fixed the typo  it started working as expected  and I don t need to use anything extra  the global express cors settings is enough  So  if anything is working for you  and you are using allowRequest  check that this function is working properly  because the errors it throws shows up as cors errors in the browser  Unless you add there the cors headers manually when you want to reject the connection  I guess

User · Answer

Using same version for both socket io and socket io-client fixed my issue

User · Answer

After read a lot of subjetcs on StakOverflow and other forums  I found the working solution for me  This solution is for working without Express   here are the prerequisites    call your js script  src   form the same server the socket will be connected to  not CDN or local call   ensure to have the same version of socket io on server and client side node modules required   fs  path  socket io and winston for logging Install Let s encrypt certbot and generate certificate for your domain or buy a SSL certificate jQuery declared before socket io js on client side UTF-8 encoding     SERVER SIDE     DEPENDENCIES var fs         require  fs        winston    require  winston        path       require  path         LOGS const logger   winston createLogger       level        info       format      winston format json        transports            new winston transports Console   level   debug              new winston transports File   filename   err log   level   err              new winston transports File   filename   combined log                    CONSTANTS const Port            9000        certsPath         etc letsencrypt live my domain com         STARTING HTTPS SERVER  var server   require  https   createServer       key                 fs readFileSync certsPath    privkey pem         cert                fs readFileSync certsPath    cert pem         ca                  fs readFileSync certsPath    chain pem         requestCert         false       rejectUnauthorized  false      req  res    gt         var filePath         req url      logger info  FILE ASKED       filePath           Default page for visitor calling directly URL     if  filePath                  filePath      index html        var extname   path extname filePath       var contentType    text html        switch  extname            case   js               contentType    text javascript               break          case   css               contentType    text css               break          case   json               contentType    application json               break          case   png               contentType    image png               break                case   jpg               contentType    image jpg               break          case   wav               contentType    audio wav               break             var headers              Access-Control-Allow-Origin                 Access-Control-Allow-Methods    OPTIONS  POST  GET            Access-Control-Max-Age   2592000     30 days          Content-Type   contentType             fs readFile filePath  function err  content            if  err                if err code     ENOENT                    fs readFile    errpages 404 html   function err  content                        res writeHead 404  headers                       res end content   utf-8                                                  else                   fs readFile    errpages 500 html   function err  content                        res writeHead 500  headers                       res end content   utf-8                                                        else               res writeHead 200  headers               res end content   utf-8                           if  req method      OPTIONS             res writeHead 204  headers           res end              listen port        OPENING SOCKET var io   require  socket io   server  on  connection   function s         logger info  SERVER  gt  Socket opened from client               your code here          CLIENT SIDE   lt script src  https   my domain com port js socket io js  gt  lt  script gt   lt script gt        document  ready function                socket   io connect  https   my domain com port                 secure  true    for SSL                            your code here           lt  script gt

User · Answer

Simple Server-Side Fix Note  DO NOT USE  quot socketio quot  package    use  quot socket io quot  instead   quot socketio quot  is out of date  Some users seem to be using the wrong package  socket io v3 docs  https   socket io docs v3 handling-cors  cors options  https   www npmjs com package cors const io   require  socket io   server      cors        origin                socket io  lt  v3 const io   require  socket io   server    origins            or io set  origins            or io origins           for latest version    alone doesn t work which took me down rabbit holes

[node.js] Socket.io + Node.js Cross-Origin Request Blocked

Examples related to node.js

Examples related to sockets

Examples related to socket.io

Examples related to cors