This question already has answers here:
How does the 'Access-Control-Allow-Origin' header work?
(19 answers)
Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?
(36 answers)
firebase hosting blocking script due to CORS issue
(8 answers)
Closed 4 years ago.
First of all, I'm sure that this is a duplicate question, but I'm a bit far from web techs, and couldn't understand what the hell is CORS, why it is blocking a simple HTTP request and how can I bypass it.
I'm trying to create an Angular 5 + Node.js web app, hosted on Firebase Hosting, and have an Elasticsearch instance on Google Cloud Platform. All I need to do is send 2 very basic HTTP requests to the ES instance from this web app. I'm already sending these requests from mobile apps and Postman app, and there is no problem. But web app logs Preflight response is not successful error. I googled the error and see that it is thrown by CORS. As I said, I have no idea what the hell is CORS and how to bypass it. Any help please (simple help to a non-web-developer). Thank you.
Shortly, CORS (Cross-Origin Resource Sharing) is a security mechanism enforced by default by the browser which specifies what resources (on which servers) your application can use (make requests for). This is a good explanation of CORS - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
So you have to set on your server the domain of your application as being one of the domains allowed to make calls. If you do so, the preflight request will return with an Access-Control-Allow-Origin header set and the browser allows the actual request to be sent.
You can have a look here to see how to do it in Firebase - https://groups.google.com/forum/#!msg/firebase-talk/oSPWMS7MSNA/RnvU6aqtFwAJ
Related
This question already has answers here:
same-origin policy and CORS - what's the point?
(1 answer)
Same origin Policy and CORS (Cross-origin resource sharing)
(2 answers)
What is the issue CORS is trying to solve?
(3 answers)
Closed 12 months ago.
I know exactly how CORS is working, i know it's implemented on browsers, and i know it forbids XMLHTTPRequests to other origins unless the remote origin allows it using the response header Access-Control-Allow-Origin.
And of-course I heard it's because the "security reasons" that it's there.
The thing i don't get is how it's improving security.
So imagine we're in a browser and we have a malicious js file loaded in our page and it wants to send our local storage data or cookies to another origin (hacker origin). so the hacker simply set the "Access-Control-Allow-Origin" to * and he's good to go! so what CORS did exactly here?
Somewhere i read that CORS is there because of "intellectual property" and that makes sense somehow, so some remote servers don't want to answer to requests from other clients. that's ok.. . but for security reasons!? I don't get that part.
I would appreciate if anyone could help me with this.
My URL is not working while fetching the data from Server. What I have done is as follows:
Created the Node JS application using Bcrypt and JWT tokens in IIS server.
I am using the access token in URL to get the data from server after validating the User.
While using the accesstoken it is displaying the data correctly with http request but not with https request.
Suppose, we have a URL whose data is http://example.com/Users/Accesstoken(length:350).
So this url will work but if we are replacing the http with https then it is showing the error
Bad Request - Invalid URL
HTTP Error 400. The request URL is invalid.
What I have tried are as follows:
I have tried using the maxURLlength in IIS to get the data, But it has not worked.
I have tried maxquerystring in IIS, this also not worked.
I have tried the port which I have used in nodejs application, this does work in http but not in https.
Now on increasing the limit of Maximum URL length under Feature Settings inside the IIS configuration request filtering settings also it is showing the ssl not secured.
Please help me out in knowing how this can be solved as I need the node js application for calling api and then I need those api's to be used in different applications like asp.net, reactjs, android, ios, etc.
I have found the answer to my own question. It is the issue of SSL not linked with my nodejs application. So in this situation, I have used the SSL configuration while creating the HTTPS server and it has solved my issue. This is the link to the answer https://www.youtube.com/watch?v=USrMdBF0zcg
I have a project, It's a web application that requires Windows Authentication.
I've setup an Active Directory at home using my NAS virtualization. Then I've created a VMWare Server for IIS which is a member of that domain on my desktop which I also use for development. I've created the Web API and installed it into that VMWare server. When I call a routine directly, it works and return results but when I use the Web API routine from my javascript web application I keep on getting 401 error. I then put the code on the IIS server and the web application works.
I've seen a lot of solutions like changing the sequence of the Provider in IIS Authentication. Added Everyone read/write permission on the folders. I've also added entry on the web.config. But none of them work.
*****Update as per request on the comment *****
Below is when I run directly from Web API
Calling the Web API from Javascript
Here's the error I'm getting
Just FYI, I tried running the web api from Visual Studio on the same machine but also with 401 error
Is there anything I could add to AD to make my development machine as trusted?
********************A new issue after the code change **********
****************Another Update******
This is definitely weird, so I installed Fiddler 4 to see what's going on. But still no luck.
Then I made changes on the IIS HTTP Response Header
The weird thing is when I run Fiddler the error is gone but when I close it it comes back.
There are two things going on here:
A 401 response is a normal first step to Windows Authentication. The client is then expected to resend the request with credentials. AJAX requests don't do this automatically unless you tell it to.
To tell it to send credentials in a cross-domain request (more on that later), you need to set the withCredentials option when you make the request in JavaScript.
With jQuery, that looks like this:
$.ajax({
url: url,
xhrFields: {
withCredentials: true
}
}).then(callback);
These problems pop up when the URL in the address bar of the browser is different than the URL of the API you are trying to connect to in the JavaScript. Browsers are very picky about when this is allowed. These are called "cross-domain requests", or "Cross-Origin Resource Sharing" (CORS).
It looks at the protocol, domain name and port. So if the website is http://localhost:8000, and it's making an AJAX request to http://localhost:8001, that is still considered a cross-domain request.
When a cross-domain AJAX request is made, the browser first sends an OPTIONS request to the URL, which contains the URL of the website that's making the request (e.g. http://localhost:8000). The API is expected to return a response with an Access-Control-Allow-Origin header that says whether the website making the request is allowed to.
If you are not planning on sending credentials, then the Access-Control-Allow-Origin header can be *, meaning that the API allows anyone to call it.
However, if you need to send credentials, like you do, you cannot use *. The Access-Control-Allow-Origin header must specifically contain the domain (and port) of your webpage, and the Access-Control-Allow-Credentials must be set to true. For example:
Access-Control-Allow-Origin: http://localhost:8000
Access-Control-Allow-Credentials: true
It's a bit of a pain in the butt, yes. But it's necessary for security.
You can read more about CORS here: Cross-Origin Resource Sharing (CORS)
So I'm trying to implement the OAuth 2 flow, while my webapp is the server that give away authorization code/access token.
Cors error happens when sending the code back to third-party website(zapier in this case):
XMLHttpRequest cannot load https://zapier.com/dashboard/auth/oauth/return/App505CLIAPI/?code=somecode&state=somestate. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://myurl' is therefore not allowed access.
If I manually open a new tab, paste that zapier uri, everything works perfectly.
Seems like a typical CORS issue, but none the popular solutions works for me:
Add Access-Control-Allow-Origin: I'm using this oauth2orize
library, and sending reponse to preflight seems also part of the
library. So I cannot add header.
Using cors: Have tried app.use(cors()) and app.options('*',
cors()) which should apply to all routes, but simply not working.
My webapp sits on a node express server, in front of which there's an nginx proxy server.
Any idea where the problem might be is appreciated.
The issue that error message indicates isn’t caused by the app code running at https://myurl/. Instead it’s just that https://zapier.com/dashboard/auth/… doesn’t seem to support CORS.
Specifically, the response from that https://zapier.com/dashboard/auth/… URL doesn’t include the Access-Control-Allow-Origin response header, so your browser won’t let your frontend JavaScript code access the response.
It seems like that is all intentional on the part of Zapier—they don’t intend for that auth endpoint to be accessed from frontend AJAX/XHR/Fetch code running in a browser. Instead I guess it’s intended that you only access that auth endpoint from your backend code. Or something.
Anyway there is no way from your side that you can fix the fact the response from that Zapier API endpoint doesn’t include Access-Control-Allow-Origin.
And as long as it doesn’t include Access-Control-Allow-Origin, your browser blocks your frontend code from being able to get to the response—and there’s no way to get your browser to behave otherwise as long as your frontend code is trying to hit that API endpoint directly.
So the only solution is to not hit that API endpoint directly from your frontend code but to instead either set up a proxy and change your frontend code to make the request through that, or else just handle it in some other way in your existing backend code, as mentioned above.
The answer at Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not? gives some details on how you can set up a special CORS proxy, if you want to go that route.
This question already has an answer here:
Multiple domains, single node (express) app
(1 answer)
Closed 8 years ago.
I'm trying to build an app that generates individual websites.
The idea is for the owner to register his domain, tell it to my platform, point it to my amazon server (still not sure how too).
Then on my express.js server I serve content based on the domain the request is coming from.
You can get the requested hostname from the headers from a field called 'host'. For a node http.ServerRequest, it's available at request.headers.host. For an express app, it can be accessed from req.get('host'). With the hostname, you can route calls from different hostnames to different responses.
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.23