Cross domain AJAX in plain html file - javascript

I have an app in plain html file (no server). How do I do cross domain requests (from javascript)?
Browser reports error: XMLHttpRequest cannot load '*'. No 'Access-Control-Allow-Origin' header is present on the requested resource.
I tried the following, but no dice.
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>

You need to set an Access-Control-Allow-Origin HTTP header (not an HTML <meta> tag) on the target resource. Set it to either Access-Control-Allow-Origin: source-domain.example.com to allow only your source domain access to it or Access-Control-Allow-Origin: * to allow any domain access. The first is preferred.

meta http-equiv is not equivalent to an HTTP header. You must make a request to an HTTP server, and it must respond with real HTTP headers.

Related

Load large json file from external website with D3

On my site "mywebsite.com" I have a D3 javascript code running on some data set located at "otherwebsite.com/data.json", so I naively tried
d3.json("otherwebsite.com/data.json", function(error, json) {
if (!error) {
console.log('done loading',json)
} else {
console.log(error)
}
})
but of course it does not work :)
Access to XMLHttpRequest at 'otherwebsite/data.json' from origin 'https://mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Anyone has a better idea? I should emphasize that it is a large file (200MB).
Thanks
Taken from the MDN page on CORS:
For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.
The CORS header in question is Access-Control-Allow-Origin which needs to either be explicitly set to https://mywebsite.com or be set to something that includes that, such as *.
If you have access to the server for "otherwebsite.com" you can change the header being sent with the request.
Otherwise you'll probably have to download the data server side on "mywebsite.com" and then have the front end request it from your back end, rather than making a cross origin request, so you'll change the JS to look like:
d3.json("/data.json", function(error, json) {...

CORS error while loading files from the same domain

I'm working on website http://www.fsvelicka.cz. I need to load a content of an HTML file to an element. I have an element and I'm loading the content with $('.about-us-first-col').load("about_us/desc/" + lang + "/first_col.html"); The problem is I'm getting an error:
Access to XMLHttpRequest at 'https://www.fsvelicka.cz/first_col' (redirected from 'http://www.fsvelicka.cz/first_col.html') from origin 'http://www.fsvelicka.cz' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The element is inside index.html file and the file I want to load is located in about_us/desc/cz/. I don't understand why I'm getting this error while the file is in the same domain.
CORS cares about the origin of which the domain is only one part.
To be on the same origin each of:
The scheme
The full hostname
The port number
… must match.
Your URLs have different schemes. One is https, the other is http. They are not the same origin.
Generally speaking, you want to be using HTTPS wherever possible. Redirect all requests from your plain HTTP service to HTTPS. That way the HTML page will be served over HTTPS and the origins will match.

No 'Access-Control-Allow-Origin' for 2 different domains or sub-domains CORS issue

There are a lot o topics about 'Access-Control-Allow-Origin', but I couldn't find one for Openseadragon which is for sub-domain name. My website is exampple.domain.com trying to open DZI from anotherexampple.domain.com and I have an error:
XMLHttpRequest cannot load anotherexampple.domain.com/123.dzi.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'exampple.domain.com' is therefore not
allowed access.
Both websites are using the same protocol HTTPS, and server is IIS
Server for exampple.domain.com is set up with:
Access-Control-Allow-Origin: *
And server for anotherexampple.domain.com is set up with:
Access-Control-Allow-Origin: *.domain.com
Also, openseadragon has settings:
crossOriginPolicy: 'Anonymous',
ajaxWithCredentials: false,
Can somebody tell me how to fix CORS issue for same domain with different sub-domains? Thanks in advance.
Access-Control-Allow-Origin: *.domain.com
The Access-Control-Allow-Origin header doesn't support partial wildcards.
Either use * or the full origin name.
You can read the Origin request header, pattern match it, and then echo it out on the server if you want to whitelist everything on a particular domain.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
You might have tried to set the Access-Control-Allow-Origin header, but it clearly hasn't worked. You need to reexamine your configuration.
This link has a nice explanation for possible values for 'Access-Control-Allow-Origin'. unfortunately you do not have much options, other than '*' or single domain like 'http://example.com'
https://www.moesif.com/blog/technical/cors/Authoritative-Guide-to-CORS-Cross-Origin-Resource-Sharing-for-REST-APIs/

Parse JSON to HTML with jquery

I need to parse this JSON link
http ://www.mse.mk/FreeMseFeeds/service/FreeMSEFeeds.svc/ticker/JSON/9538ac69-2c99-45ba-bbd4-90931ca0cc7d
to be same like on this page:
http ://www.mse.mk/en/
image:
http: //tinypic.com/r/1zlyhwo/8
I've tried like this:
$.getJSON("http://www.mse.mk/FreeMseFeeds/service/FreeMSEFeeds.svc/ticker/JSON/9538ac69-2c99-45ba-bbd4-90931ca0cc7d",function(data){
alert(data[0].name);
});
I got this error:
XMLHttpRequest cannot load
http:// www.mse.mk/FreeMseFeeds/service/FreeMSEFeeds.svc/ticker/JSON/9538ac69-2c99-45ba-bbd4-90931ca0cc7d.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http: //kristijanz.com' is therefore not allowed
access.
Any help ?
Looks like a CORS issue - your application calling www.mse.mk/FreeMseFeeds/service/FreeMSEFeeds.svc/ticker/JSON/9538ac69-2c99-45ba-bbd4-90931ca0cc7d is not running in the same domain.
If you control the service, you can implement CORS to allow other domain origins.
If you do not, you cannot call this service from your domain.
CORS - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Enabling CORS for accessing remote feed

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);

Categories