I have an Angular app running in gh-pages https://yourweatherapp.github.io/yourweatherapp.github.io which make requests to a node.js app that it´s running in a host.
Previously, I have consulted other info on the net like this How to allow CORS?, but solutions don´t work for me
I have configured the node.js app to allow request from this origin on this way:
const corsMiddleware = cors({
origin: [process.env.URL, 'https://yourweatherapp.github.io/yourweatherapp.github.io/login']
})
app.use(corsMiddleware)
app.options('*', corsMiddleware)
But the browser doesn´t allow to receive the answer and do login.
What am I doing wrong?
'https://yourweatherapp.github.io/yourweatherapp.github.io/login'
Look at the error message in the browser console. It will tell you the origin that doesn't have permission to read the data, and it won't be that.
Origins do not include paths. So that is not a valid origin.
It should be only https://yourweatherapp.github.io
Related
I am making an application in which i have a node backend, and an angular frontend.
I am using socket.IO to communicate between my client and server.
I was facing CORS issue, which i solved (tried to) as:
const io: SocketIOServer = new SocketIOServer(server, {
cors: {
origin: true
}
}); // only for development
But still, upon making my request from my client app (running in another port) gives me CORS issue.
So i went to my terminal, and made a request with curl,as shown here:
me#Desktop:~$ curl "http://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NV5sBAn"
0{"sid":"jAhPIEEkdy8EY8I_AAAD","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000}
This suggests me that curl is being able to access the server, and is not facing CORS issue.
In my client, i am trying to connect to my server as:
socket = io.connect('http://locahost:5000'); // server running at port 5000
Help me with my issue, so i can connect with my server.
Also on a sidenote: If the version of server.io in the app is 3, the curl request to the server is also failing. only upon server.io version 4, the curl request is passing.
The error in firefox if that helps:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://locahost:5000/socket.io/?EIO=4&transport=polling&t=NV5vi1_. (Reason: CORS request did not succeed).
EDIT: my issue is not being able to connect to the server with client. I showed the curl because it was suggested in the socket.io cors configuration webpage.
Because socket.io initiates its connection with plain http requests, it is subject to CORs restrictions. CURL does not enforce CORs restrictions (like the browser does) so that's why you don't see it there.
You have a couple options:
You can enable this specific CORs request in your server to permit it.
You can specify the {transports: ['websocket']} option for your socket.io connection in the socket.io client code that initiates the connection. This will tell socket.io to immediately start with a webSocket connection which is not subject to CORs.
Curl does not implement CORS security restrictions, thus it will always be able to connect. You have different ports for your frontend and backend which are considered different CORS origins. So you either need to set your allowed origins correctly on your server and make sure it handles the pre-flight requests, or have the process serving your frontend proxy requests to the backend so that everything is on the same url from the browser’s point of view
Apprrently, the issue was:
socket = io.connect('http://localhost:5000');
changing this to:
socket = io.connect('http://127.0.0.1:5000');
worked!! I have no idea why this name was not getting resolved!!
I have an API developed in Node.JS, Typescript listening to localhost:3001
I have a frontend app in Angular, Typescript, listening to localhost:4200
I am trying to upload an image file using ngx-image-cropper, converting it to base64, from frontend to the API.
When the PATCH (update) http request is sent to the API, I get:
Access to XMLHttpRequest at 'http://localhost:3001/member/10' from origin 'http://localhost:4200' has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.
My Overnight.JS Express server is configured as below:
const corsOpts1 = { origin: '*' };
this.app.use(
cors(corsOpts1)
);
}
I have tried several things, no success.
For example, on top of my class controller, I added the directive ClassMiddleware as below:
#Controller('member')
#ClassMiddleware([cors()])
That's the response looking at Chrome's dev tools:
I have run out of options. My extensive research on the internet did not provide me with a successful solution.
I'd appreciate if some who had this issue before, how did you solve it. Many thanks.
Looks like your front-end is doing a Pre-Flight cors request. Try using the following on your express server:
app.options('*', cors()) // include before other routes
See the express docs for more information (scroll down to Enabling CORS Pre-Flight).
I cannot access a custom heroku API endpoint in a react/redux app. The heroku endpoint loads up fine in a browser, and I can see the network request coming back on my console, so it seems something in my app itself is preventing it from returning.
It's the classic 'No 'Access-Control-Allow-Origin' header is present on the requested resource' error, but what's perplexing is that I can use another endpoint (such as openweather's API) and don't get this error.
Do I need to use Express or other middleware to deal with Heroku specifically? I'm creating a store with ReduxPromise middleware right now and am using Axios to make the request. Or is there a server side configuration on Heroku that might change this?
Thanks for your help, pretty new to react/redux/node =)
This is a CORS issue, you need to add a cors configuration into your API request and accept the origins on the server side using access-control-allow-origin header and accepting the referrer url of the request.
These are my configuration options when using redux-api to make the requests, look at the documentation for your specific framework:
export const baseOptions = {
mode: 'cors',
credentials: 'include',
headers
}
I am currently trying implement Auth0 in my NodeJS + React App.
This tutorial given is really good and helpful, though I have one big problem.
Every time I try to login/register via Auth0 I get
XMLHttpRequest cannot load
https://XYZ.eu.auth0.com/usernamepassword/login. Response to preflight
request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access. Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'http://localhost:3000' is therefore not
allowed access.
So I have a rough understanding what that means. But I just don't know where to set the needed options to allow this request to Auth0. On the Server side? In the Browser code?
Best regards
EDIT:
as Rodrigo López Dato pointed out, I can write Origins in my app here: https://manage.auth0.com/#/applications
What should I put there when I am developing locally? My IP?
If you are developing locally, you can put the URL you are going to redirect to. For instance, if you are running on your localhost at port 4000, and you want to redirect to your route called /callback, you can put:
http://localhost:4000/callback
in that field.
Auth0 needs to know what your allowed origins and callback URLs are for your application. You can configure that in your application's settings in the dashboard: https://manage.auth0.com/#/applications
Just to elaborate more on the server side since you mentioned you are building a node.js app. I assume you are also using express. To deal with CORS requests you can do the following:
In your express server file you can set the local host to something other than the client side React app which most likely is running on localhost:3000.
var port = normalizePort(process.env.PORT || '5000');
app.set('port', port);
Then install the cors npm package and initialize it in your main express file.
var app = express();
app.use(cors());
Then all you have to do is set a proxy in your client side React package.json file.
},
"proxy": "http://localhost:5000"
}
You can then run both your node.js/express server and React app at the same time and use your express server to make requests through the client React with the proxy.
Hopefully this helps.
I have a working node.js Express server to which I would to add socket.io support (allow javascript clients to connect via socket.io). I can connect to the express server via a Javascript $.get(), but the socket.io.connect() command fails due to a CORS error.
My testing machine is OSX with Apache to serve the client, thus port 80 is taken, so I have node.js/express running on port 8888. I added socket.io per the documentation:
var exp = express();
var server = require('http').createServer(api.server);
exp.listen(8888);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket) {
console.log('connection');
});
I properly see "info: socket.io started" in my node.js logs.
Then, on the client, I attempt to connect to the server...
this.socket = io.connect('http://localhost:8888');
this.socket.on('connect',function() {
socket.emit('install','test');
});
However, I'm getting a CORS error in the console in Chrome:
XMLHttpRequest cannot load http://localhost:8888/socket.io/1/?t=1358715637192. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
HOWEVER, THIS works fine!
$.get('http://localhost:8888',function(e,d){
console.log(e,d);
});
So I double checked my headers, for both localhost:8888 and localhost -- both are properly returning the headers which (should) allow for the cross-domain requests...
Access-Control-Allow-Origin: *
Any ideas?
CORS is a very tricking thing to get working (or at least it was for me). I recommend this resource here: http://enable-cors.org/
Following what they do very carefully helped me. I also found that different browsers gave different visibility over the CORS request/responses which helped.
I found that Chrome was easier to get working than firefox, but firefoxes tools such as firebug, were quite nice to work with.
My gut feel from your information is that you might need your request to have an X-Request-With in your request attributes.
I also found using fidler to send the http requests allowed me to narrow my problems down to the server side initially and get that working. You will find browser enforce CORS, but something like fidler doesn't and thus provides another way of inspecting what is happening.
I definately recommend trying to break the problem in half so that you can see if it is server side or client side that is not behaving how you expect.
My problem was related to returning the same CORS response for the OPTIONS header as the POST or GET. That was wrong. Chrome allowed it. Firefox didnt. Any options request that is sent out will be sent out once, then in the future it will be cached and not resent (Which caused alot of confusion for me initially). For the options request you just need a standard response saying its ok to proceed, then in the post or get response i believe you want your cors responses there only.