Ad

I Get An Error (No 'Access-Control-Allow-Origin' Header Is Present On The Requested Resource) When I Access My React App Using Heroku

- 1 answer

I made a simple chat app using react and socket.io. It all went good,the app worked fine on localhost ,but when I deployed the app with Heroku ,I get the same error. No 'Access-Control-Allow-Origin' header is present on the requested resource

This is how I connect to the server in the react app

import React,{Component} from 'react';
import './App.css';
import { SocketProvider } from 'socket.io-react';
import io from 'socket.io-client';

const socket = io.connect('https://react-zoichenger.herokuapp.com');

This is my nodejs server

const express =require('express')
const socket = require('socket.io')

var cors = require('cors')
var app = express()

app.use(cors())

const server = app.listen(4000,function(){
  console.log("Connected");
})

//Socket setup
const io = socket(server);


io.on('connection',(socket)=>{
  socket.on('sendMessage',(data)=>{
    console.log(data);
    io.emit('receiveMessage',data);
  })
  console.log('made socket connection')
});

Ad

Answer

Try to modify your server-side code

var io = require('socket.io')(server, { origins: '*:*'});
Ad
source: stackoverflow.com
Ad