Hi I'm trying to find a way to get the URL of a redirected webpage.
Ex/ I type in a url to my web browser, "http:foo.com", and it redirects me to "http://foo.com/bar".
How can I use fetch or something else to have "http://foo.com/bar" returned to me? (The website I'm trying to receive the url from "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Please and thanks in advance for ideas / solutions.
You can't. XMLHttpRequest and fetch silently follow redirects, and no information about the final URL is available in the object afterwards.
Even if that information was available, the Same Origin Policy would prevent you from accessing it (as the error message indicates).
Use a server side technology instead.
Related
I am attempting to read the redirect URL from a 3xx redirect. (I'm planning on just reading the location: https://myredirectedurl.com header and handling it myself in JS. However when I make the fetch request i recieve
Access to fetch at 'https://myredirectedurl.com' (redirected from 'https://localhost:8000/somepath') from origin 'https://localhost:8000' 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.
I know why this error is raised and I do understand how CORS works. However I do not want the fetch function to execute the redirect.
I read on this stackoverflow question that the redirect: 'manual' property may help if it is set. This does stop the CORS error from appearing and stops the redirected request, however I am now unable to read the location: https://myredirectedurl.com header. I wish to read this so I can handle the redirect based on my application logic and then possibly use window.location.replace
I just wanted to update incase anyone stumbles here from a search engine. It is not possible. The browser transparently redirects before the client javascript can even interact with it. The recomended way to handle this is to use som 2xx status for the redirect and then read the redirect url from either a header or the content.
I have built a REST API with Node.js Express http://localhost:3000/api/feeds with node.js and filled with data.
router.get('/api/feeds', function (req, res, next) {
documentDBConfig.getAllDocuments()
.then(() => res.json(documentDBConfig.feedsArray));
});
Now i make a static website and want to use javascript or jquery to get data from my REST API. I used this code
$.getJSON( "http://localhost:3000/api/feeds", function( data ) {
console.log(data);
});
But it keeps saying
XMLHttpRequest cannot load http://localhost:3000/api/feeds. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.
I know i'm doing it wrong, but i couldn't find the correct way. How can i get this json content with my website from my REST API (http://localhost:3000/api/feeds) ?
Edit: I don't get this warning with explorer, but i can not get the content. And now i solved the chrome problem thus i don't get this warning anymore. But i can't read the content. That is not a duplication.
Now i get this warning
Failed to load resource: the server responded with a status of 404 (Not Found)
Can you show us your REST api code so we can help you ? You need to set some headers in your backend to allow requests coming from other origins.
If you happen to be using express, this will help you. But you could have built the REST api in another way, so please provide us with more information.
This is because you are accessing a resource from another domain.
You try to access http://localhost:3000 from http://localhost:63342.
You can read more about this here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin
Basically you are performing a CORS request which means you are trying to call a resource on different server. So your REST api should allow CORS requests by adding the response headers allowing the UI server resource.
Please Refer to this question if it helps
I'm trying to read a remote RSS feed and getting the follwing error message:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://*.*.*.*' is therefore not allowed access.
Can anyone tell me how to enable CORS so I can resolve this issue - particularly if I don't have admin access to the remote resource?
It's up to the remote resource to allow cross-origin resource sharing. The response needs to have a header that specifies that access can come from your domain. Something like:
Access-Control-Allow-Origin: http://xyz.example.com
needs to be present in the response headers.
Without control over what the remote site, there's not much you can do to enable CORS to that site (other than contacting the site administrator).
Other CORS headers and how the entire scheme works is described here (among other places).
Seems like a cross domain request issue. Would you consider just using a middle scrit as a proxy workaround?
Then make your javascript request to a php file that grabs the data for and feeds it back such as
<?php
$url = 'http://getmethedatafromyourapi';
header('Content-Type:text/json');
echo file_get_contents($url);
As an example case let's take this url: http://api.duckduckgo.com/?q=computer&format=json (CORS not enabled on this server!)
We can access the contents from this URL from any popular browser as a normal URL, browser has no issues opening this URL nor the server returns any error.
A server-side language like PHP/RoR can fetch the contents from this URL without adding any additional headers or special server settings. I used following PHP code and it simply worked.
$url='http://api.duckduckgo.com/?q=computer&format=json';
$json = file_get_contents($url);
echo $json;
I just started working in javascript framework, AngularJS. I used following code...
delete $http.defaults.headers.common['X-Requested-With'];
var url="http://api.duckduckgo.com/?q=computer&format=json";
$http.get(url)
.success(function(data) {
$scope.results=data;
})
With above AngularJS code, I received following error:
XMLHttpRequest cannot load http://api.duckduckgo.com/?q=computer&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.
AngularJS uses JQuery so I tried the same in JQuery with following code:
var url="http://api.duckduckgo.com/?q=computer&format=json";
$.getJSON(url , function( data ) {
console.log(data);
});
This also produced the same error as did AngularJS code.
Then my further research brought me to the point that it's actually not specific to JQuery and AngularJS. Both of these inherit this issue from Javascript!
Here is an excellent resource with explanation of what CORS is and how to handle with it: http://enable-cors.org/index.html.
And also W3C has it official CORS specification: http://www.w3.org/TR/cors/
So my question is not what CORS is. My question is
My understanding is that whether it is a web browser or it is PHP/RoR or it is Javascript frameworks, all make requests to a URL via the same http or https, right? Certainly, yes. Then why http has to be more secure when requests come from javascript? How does http and server know that request is coming from javascript?
When a web browser can open a URL and PHP/RoR (or any server-side language) can access that URL without any extra settings/headers, why can't AngularJS, JQuery (or in a single word javascript) access that URL unless the server has set Access-Control-Allow-Origin header for requesting root?
What's that special feature (that PHP/RoR have and) that is missing in Javascript so that it can't access the same URL in the same browsers that can open that URL without any issue from their address bars?
Just to mention that I am basically an iOS developer and recently started to learn web development, specially AngularJS. So I am curious about what's all this going on and why!
It's disabled from javascript for security reasons. Here's one scenario:
Assume Facebook has a "post message on timeline" api that requires the user to be authenticated.
You are logged into Facebook when you visit badsite.com.
badsite.com uses javascript to call the Facebook api. Since the browser is making a valid request to Facebook, your authentication cookie is sent, and Facebook accepts the message and posts badsite's ad on your timeline.
This isn't an issue from a server, because badsite.com's server doesn't have access to your Facebook authentication cookie and it can't forge a valid request on your behalf.
You remember that all javascript request is handled by browser. So browser detect cross-origin request is easy.
Request from javascript has no difference with PHP/RoR, it is only rejected by browser.
Server code can accept cross-origin javascript request by header "Access-Control-Allow-Origin" because before reject javascript request, browser will send a request "OPTIONS" to server to ask header "Access-Control-Allow-Origin" on response. If value is match with current origin, browser will accept javascript request and send to server.
All browser are implement this policy Same Origin Policy
Please read http://en.wikipedia.org/wiki/Cross-site_scripting, you will get the reason why its prohibited for JavaScript.
I'm trying to better understand Cross Site Scripting and lets use:
http://api.beatport.com/crossdomain.xml as the example.
The XML lists that all domains are allowed access. However when I make the request from within my HTML page (or from within the console) it will fail with an error similar to:
XMLHttpRequest cannot load http://api.beatport.com/catalog/tracks. Origin <mydomain> is not allowed by Access-Control-Allow-Origin.
What I find weird though, is if I put the request in the address bar of my browser, the request goes through.
Can someone please explain what is going on and what I need to do to fix this because clearly the API allows access from any domain.
XMLHttpRequest doesn't look at crossdomain.xml, it looks at Access-Control-Allow-Origin header as mentioned in the error message.
So the server needs to send a header like this:
Access-Control-Allow-Origin: *
If they don't send that header (http://api.beatport.com/catalog/tracks doesn't), it will be denied.