I'm developing a client and server app, that communicate over web-sockets and found that handling CORS only on the web-socket doesn't raise any additional CORS issues, without handling CORS on the server side itself.
Before solving the issue the error on the client side was:
Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NOOM0wp' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
No "Access-Control-Allow-Origin" header on the response object, that appears only if I handle CORS on the server side.
But, on the client side I get an error:
GET http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NOONjI6 net::ERR_CONNECTION_REFUSED
I guess this is a pretty simple issue, still an explanation will be much appreciated.
Use cors configuration.
Refer to Handling CORS.
var express = require('express')
var app = express()
var app = express()
var server = require('http').createServer(app)
var io = require('socket.io')(server, {
cors: {
origin: "*" // add your own origin, or '*' for any origins allow.
}
})
Related
I want make a GET request from my application angular to an API.
my application is on (localhost:4200).
When I request i use this URL
return this.http
.get<parameter>('https://sub.staging.company.com/application/action/getParams')
but I have a CORS errors like below :
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
For avoid this error, I created a proxy.conf.js
const PROXY_CONFIG = [
{
context: ["/application/action"],
target: "https://sub.staging.company.com",
secure: false,
changeOrigin: true,
},
];
module.exports = PROXY_CONFIG;
But I have always this error and the proxy doesn't work.
How I can fix my problem ?
Thank for your help.
You need to proxy from a location on the same domain as your dev server. The browser still sees https://sub.staging.company.com/application/action/getParams as a cross domain request. You need to make a local call to /application/action/getParams and then the proxy will get it from https://sub.staging.company.com/
To facilitate your development locally and assuming you're using Google Chrome, a Chrome extension like this should do the trick.
Use have to implement it on backend too...
Like for node.js
npm i cors
then in index.js(root) file
const cors = require('cors');
const corsOptions = {
origin: 'http://example.com',
optionsSuccessStatus: 200
}
app.use(cors(corsOptions);
I added headers on the server side
res.setHeader('Access-Control-Allow-Origin','*');
res.setHeader('Access-Control-Allow-Methods',"OPIONS,GET,POST,PUT,PATCH,DELETE");
res.setHeader('Access-Control-Allow-Headers','Content-Type , Authorization');
But I still get the error on reactjs
I used fetch for send and take data.
Also I used from the header 'Access-Control-Allow-Origin':'*'
On the ractjs
you can use pretty good library called cors which can do all your configs for you. here check it cors. you can configure it in your app.js like so:
const express = require('express');
const app = express();
const cors = require('cors')
app.use(cors());
if this does not work, you probably forgot to add proxy to your client's package.json
So I have a P5JS app which has a very simple preload function:
function preload() {
json = loadJSON(getCurrentViewersUrl());
}
which calls this function and returns the request url:
function getCurrentViewersUrl() {
return "https://tmi.twitch.tv/group/user/" + STREAM_NAME + "/chatters";
}
This all worked swimingly when using http-server to start my P5JS app.
I've now just switched so that my P5JS code is served up by my node app.
const express = require('express');
var app = express();
var server = app.listen(9999);
app.use(express.static('public'));
But now, with making this change I'm now getting the cors policy error:
Access to fetch at
'https://tmi.twitch.tv/group/user/x/chatters' from origin 'http://localhost:9999' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
My question is, why am I getting this now and not before?
This is what the request looks like:
I have two node servers on localhost:3000 and localhost:4000.
I call 4000 from 3000 and get the following error.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
Any suggestions for this error?
If the 4000 server is a express based node server, use "cors" package to solve it like below
var cors = require('cors');
.....
app.use(cors());
Where app is an express application.
I'm trying to use sockets to connect to a Node server I'm running localy
but I keep on getting 'info - unhandled socket.io url' on the server side
+
"XMLHttpRequest cannot load http://localhost:8080/socket.io/?EIO=3&transport=polling&t=1424356590540-0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access." on chrome (using address localhost:8000/index.html)
// top six lines of code to see setup
var express = require('express'),
app = express(),
http = require('http'),
server = http.createServer(app),
io = require('socket.io').listen(server);
server.listen(8080);
also I'm using python SimpleHTTPServer on port 8000
client code is:
var socket = io.connect('http://localhost:8080');
socket.on('connection', function(){
console.log("connected")
});
using https://cdn.socket.io/socket.io-1.3.4.js" version of sockets.io
I'm assuming the html is irrelevant since I don't have any javascript code in it (except references to angular and jquery)
That's a problem with CORS.
Since your web page is on localhost:8000 and the Socket.io server is on localhost:8080 (two different ports, so two different servers), to allow async requests between the two of them you need to enable CORS. Browsers require that for security reasons.
Your server seems to be using Express. Enabling CORS in Express is quite easy, thanks to NPM packages like cors. Alternatively, look at some questions on SO, like: How to allow CORS?