Can't connect to server because of CORS (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
See original GitHub issueThis is my app.module.ts:
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:4000', options: {} };
@NgModule({
declarations: [AppComponent, MapComponent],
imports: [BrowserModule, HttpClientModule, SocketIoModule.forRoot(config)],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
this is my server:
const server = require('http').createServer();
const options = {
origin: '*',
methods: ['GET', 'POST'],
};
server.listen(4000, () => {
console.log('Server ready....');
});
const io = require('socket.io')(server, options);
io.on('connection', (socket) => {
console.log('Connected');
socket.emit('data', JSON.stringify(data));
});
This is how I am trying to get data from socket server in my service:
getMarkers(): Observable<IMarker[]> {
return this.socket.fromEvent<string>('data').pipe(map((data: string) => JSON.parse(data)));
}
Every time I open localhost:4200 I get CORS error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/socket.io/?EIO=3&transport=polling&t=NReqqZ8. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Don’t know what to set here to make CORS works:
const options = {
origin: '*',
methods: ['GET', 'POST'],
};
Issue Analytics
- State:
- Created 3 years ago
- Comments:5
Top Results From Across the Web
Reason: CORS header 'Access-Control-Allow-Origin' missing
The response to the CORS request is missing the required Access-Control-Allow-Origin header, which is used to determine whether or not the ...
Read more >3 Ways to Fix the CORS Error — and How the Access-Control ...
Reacting to this special request, the server sends back a response header. This header contains an Access-Control-Allow-Origin key, ...
Read more >CORS header 'Access-Control-Allow-Origin' missing
This happens generally when you try access another domain's resources. This is a security feature for avoiding everyone freely accessing any resources of ......
Read more >Fixing "No 'Access-Control-Allow-Origin' Header Present"
"No 'access-control-allow-origin' header present" is one of the least helpful error messages. So, what is it and why is it breaking your web ......
Read more >What Is a CORS Error and How to Fix It (3 Ways) - Bannerbear
A CORS error occurs when the server doesn't return the CORS headers required. ... you can add the missing header like Access-Control-Allow-Origin: *...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I fixed CORS issue by adding this to config in my app:
server:
But still on app start i am not connected to socket, can’t see connected in the console
Any errors? You’d have to show us the code you use to connect to the server, but a better place for troubleshooting is on other community channels like StackOverflow.