How to solve error "Access-Control-Allow-Origin" from javascript? - javascript

I'm developing chrome extension and I want to get HTML content from URL, and I have a code as below:
function getContentHTML() {
var theUrl = 'http://tuoitre.vn/The-gioi/620269/my-cong-bo-anh-ve-tinh-nga-ban-ten-lua-vao-ukraine.html';
$.ajax({
url: theUrl,
crossDomain: true,
dataType: "html",
type: "GET",
success: function (data) {
document.write(data);
}
});
}
My problem is: Some website I can get HTML content but some website I can not get HTML content and show error is "Access-Control-Allow-Origin". I'm also follow in google but I can not solved.

This means that the site doesn't allow your page's origin to query its content via ajax. This is disallowed by default because of the Same Origin Policy, but can be enabled by the site owner via Cross Origin Resource Sharing.
If the site doesn't allow your origin to access it, you cannot solve it client-side. You'd have to do something like query the information from your server (which would in turn use server-side code to query it from the other site, and then return it to you).

there are sites on which server will not accept requests from third-party domains. This problem has no solution.

Related

How can I read a csv file from my library in Qualtrics?

I'm new to Qualtrics, HTML, and Javascript, so feel free to let me know if what I'm asking for is impossible.
I'm trying to use Qualtrics to gather some data that relates applicant test scores and schools that the same applicants were admitted to. As part of my autocomplete function (this is needed to standardize user input-- don't want the problem of some people typing UCLA and others University of California, Los Angeles), I need Qualtrics to read a csv file of schools that is currently stored in my Files Library, and that convert that csv into an array. I'm having trouble getting it to read the file to begin with.
I've tried using ajax (still don't really know what it is- I'm bumbling, here). Here is my attempt with ajax in Javascript:
autocomplete: function() {
var availableTags;
jQuery.ajax({
type: "GET",
url: "illinoislas.qualtrics.com/CP/File.php?F=F_8Aek00I0KXkihUN",
dataType: "text",
success: function(result){
availableTags = jQuery.csv.toArrays(result);
}
});
jQuery(".InputText" ).autocomplete({
source: availableTags
});
}
As far as I can tell, the ajax request isn't succeeding. The url I provided it is the View button of the csv file in my library, and it's obviously not a csv, but I don't know how else to proceed. Any help will be greatly appreciated.
I tried a simple AJAX request on your 'csv' URL
$.ajax({
url: "https://illinoislas.qualtrics.com/CP/File.php?F=F_8Aek00I0KXkihUN",
method: "GET"
}).then(function(response) {
console.log(response);
});
... and ran into the CORS policy error in the console:
Access to XMLHttpRequest at 'https://illinoislas.qualtrics.com/CP/File.php?F=F_8Aek00I0KXkihUN' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. ... Certain "cross-domain" requests, notably Ajax requests, are forbidden by default by the same-origin security policy. https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Basically you can't do AJAX requests to external domains unless the server you are calling is designed to return a header saying it's okay. The same applies to iframes (as soon as you try to access the content of the iframe with javascript). It's a browser security mechanism to protect the user.
The easiest fix would be to make a copy of that 'csv' file and host it on the same domain as your page. You can still use AJAX URL: "./assets/schools.csv"
Also note, testing your AJAX response with a console.log(result) is an easy way to check you have data coming back from the request.

Looking for clarification; How do I access a particular webservice with local files an Ajax

It could be I have completely misunderstood how web services work.
So there's a webservice I want to access through a javascript file sitting in a folder on my desktop. The server I am trying to access has not set a CORS header, so I have some trouble just using regular ol' ajax.
And frankly I am not sure where to go from here.
$.ajax({
type:"get",
crossdomain: "true",
url: "https://name", //actual name redacted from this question
success: function(data){
console.log(data);
}
});
A regular get like this will print the following in firefox's console.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ws.zooom.no/v1/channels. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
I got a hint from the task giver that I need to set the following in my "hosts file"
#127.0.0.1 www.domainname.com
Which confuses me. I have little to no experiences hosting anything, but does this hint that I need to maybe virtually host my "webpage" to access the webservice? It probably doesn't help to say I feel at a loss here.
So the bad news is that unless the 3rd party service either allows cross-domain requests (this is a configuration on that 3rd party server), or allows JSONP requests, you really have no option to access this service using a browser and javascript.
You could perhaps build your own service to proxy requests to that third party service. This would give you control over domain, CORS, JSONP, etc.
I found a solution.
Using something called "JSONP" that I had never heard of until now, i wrote a request like this
$.ajax({
type: 'GET',
url: "https://DOMAINNAME.com",
contentType: "application/json",
dataType: 'jsonp',
success: function(data) {
console.log(data)
},
error: function(e) {
console.log(e.message);
}
});
This somehow completely negated the CORS problems

Ajax Request Fails why?

following my code:
$('#btnOK').click(function(e){
e.preventDefault();
$form = $('#testForm');
dataString = $form.serialize();
$.ajax({
type: "POST",
url: 'https://abc.com/login',
data: dataString,
dataType: 'xml',
success: function( returnData ) {
alert(returnData);
}
});
});
My Code fails to make ajax request to http://abc.com/login page and doesn't gives out result. What's the mistake here?
Is it due to cross domain likely:
my domain: http://xyz.com
login domain: http://abc.com/login
unless your abc.com domain is configured to deal with cross-origin policy, you won't be able to make a cross-domain ajax call
A solution is to redirect your ajax call to a server side proxy under xyz.com domain who send your data and get the response from abc.com (e.g. using CURL).
or if you're in control of abc.com domain you could send proper headers (Access-Control-*) to allow crossdomain calls
my domain: http://xyz.com
login domain: http://abc.com/login
This is cross domain issue you can get over with
Proxy on your site
JsonP support from abc.com site
If you just want to post and dont care what result is, you can create a form and a iframe then set target of the form to that iframe, then just post (wont work with csrf enabled site)
Just debug it use chrome or ie debugger, make a breakpoint at the entry of the click() function, and then step by step, you'll find the problem.

Store external page source in Javascript variable?

Strictly using Javascript, is it possible to call a remote URL and store it in a variable? To specify, this would not be on the same domain. Basically, what i am trying to figure out the best solution for scraping/parsing data in a chrome extension.
If you're trying to load the page from an external domain, you'll run into the same-origin policy. You can get around this limitation by setting up a simple proxy on your own site. This would be a bit of server-side code whose function is to make the http request to the external page on your behalf, retrieve the response, then serve that content back to the on-page asynchronous JavaScript code making the original request.
So if you set up your proxy at /your_internal_proxy.foo, and you're using jQuery, you could build a JS function something like this:
var foreignContent = {};
var loadPage = function(pageURL,varName) {
$.ajax({
type: 'get',
url: '/your_internal_proxy.foo',
data: {
url_to_get: pageURL
},
success: function(result) {
foreignContent[varName] = do_something_to( result );
}
});
};​
Then, to load content into JS variables:
loadPage('http://www.google.com/','goog');
loadPage('http://stackoverflow.com','stack');
While Ajax may be the way to go it depends on what you mean by "remote URL". Ajax will only work for url's with the same domain as the domain where the javascript originated from, due to Javascript cross-domain restrictions. There are various work arounds but most require the co-operation of the remote domain. I've have heard of using YQL as an intermediary but have never tried it. Easiest is to host a proxy on your own server.
If you are allowed to use jQuery you can have something like:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Also the $.get() can be used to achieve this
http://api.jquery.com/jQuery.get/
$.get("test.html",
function(data){
// do something with response data
});

How to load a XML from a 3rd party site with Javascript/JQuery?

I am trying to load a 3rd party xml document using JQuery/Javascript, but without success:
alert("Before");
$.ajax({
type: "GET",
url: "www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml",
dataType: "xml",
success: function(xml) {
alert("OK");
}
});
alert("After");
The "OK" box is not displayed, but the xml is available with a browser. This code example is available at JSFiddle.
How is one supposed to load a 3rd party XML in Javascript?
The protocol has to be specified, http:// (or perhaps https://).
url: "http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml",
Updated code: http://jsfiddle.net/gv9Kr/1/
As you can see, the code does not work, because of the Same-origin policy.
It is due to cross domain restrictions. There are plenty of resources available in the internet just google on it. There are various work arounds to it one of which is YQL
same origin policy prevents you from doing that. you must find ways to circumvent this. for JSON type data, there is JSONP. here's a question from SO that might be related to your issue.

Categories

Resources