Develop Reference

Javascript cross-domain request

I have a problem.
Is it possible to make a request to a different domain? For example, I have a website test.com and it has to take some data from http://www.google.lv/search?q=fat+pumpkin. I already have tried jQuery .load method, XMLHttpRequest(), but the result is always the same, I get error: Failed to load https://www.google.lv/search?q=fat+pumpkin&.rtng: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Is there some option to overcome it without PHP or another server language?

The same question as your case : Access-Control-Allow-Origin error sending a jQuery Post to Google API's.
Basically you need to add a crossDomain option for ajax request, example:
$.ajax({
url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
data: myData,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function() { alert("Success"); },
error: function() { alert('Failed!'); },
beforeSend: setHeader
});

Get html file from a given url using javascript($ajax)

var $ = require('jquery');
$.ajax({
type:"GET",
dataType: 'html',
url: 'http://www.google.com/',
success: function(res){
console.log(res);
}
});
I am getting this error in the console:
XMLHttpRequest cannot load http://www.google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
What can I do to avoid this error? Please help.

If you control the backend, you can proxy this request to the backend, i.e. using PHP:
// get.php
echo file_get_contents($_GET['url']);
// frontend JS
$.ajax({
type:"GET",
dataType: 'html',
url: '/get.php?url=http://www.google.com/',
success: function(res){
console.log(res);
}
});
PHP will be able to fetch the data, as it's not checking CORS.

You cannot send cross origin requests because it is a security vulnerability.

Its because google.com goes not have cross origin requests enabled. If you try a site that does like for example:
$.ajax({
type:"GET",
dataType: 'html',
url: 'https://cors-test.appspot.com/test',
success: function(res){
console.log(res);
}
});
Then you will get the desired result

I think this is because of security problem while fetching another domain.
Please check this
"No 'Access-Control-Allow-Origin' header is present on the requested resource"

Ajax autocomplete from youtube search, Cross-Origin Request Blocked

EDIT: I was able to solve this, thanks for you time
I am trying to make an autocomplete on a search form for youtube videos.
I got the url you can use from here: Youtube API search auto-complete
And I'm using this script (though I don't think it has much to do with the problem I'm having): https://goodies.pixabay.com/javascript/auto-complete/demo.html
code I'm using
var xhr;
new autoComplete({
selector: '.search-box',
source: function(term, response){
try { xhr.abort(); } catch(e){}
xhr = $.getJSON('https://suggestqueries.google.com/complete/search?client=firefox&ds=yt', {
q: term,
dataType: "jsonp"
}, function(data) {
console.log(data)
response(data);
});
}
});
gives me the response:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=test&dataType=jsonp. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Am I just not allowed to do this?

install a chrome plugin "Allow-Control-Allow-Origin"

To prevent Cross Site Scripting (XSS) attacks, XHR's are limited in the domains that they can contact. But there are ways around this that also keep users secure.
Route the request through your own domain, but this depends on your server side architecture
If developing a browser extension, like in chrome it is possible to configure the manifest to allow the communication
Or, enable cross-origin requests by modifying headers sent by the server, like in
PHP
Node.js
I would not suggest asking users to install extensions that usurp this very important policy

Was able to figure it out thanks to this answer: https://stackoverflow.com/a/6120260/929321
Changed from .getJSON to .ajax and added dataType: 'jsonp'.
$.ajax({
url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
data: myData,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function() { alert("Success"); },
error: function() { alert('Failed!'); },
beforeSend: setHeader
});

Try the provided youtube search API by getting the credentials from the API console. Here is the link and you can try it out there as well : https://developers.google.com/youtube/v3/docs/search/list
$.get(
"https://www.googleapis.com/youtube/v3/search",{
part : 'snippet',
q : 'batman',
key: 'YOUR_API_KEY'},
function(data) {
console.log(data);
//do the manipulation here
}
);

CORS issue while submitting data to google forms in angular

While submitting the data :
Error Message : XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. 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:8090' is therefore not allowed access. The response had HTTP status code 405.
$scope.postDataToGoogle = function(){
$http({
method: 'POST',
crossDomain: true,
url: 'https://docs.google.com/forms/d/XXXXXXXXXXXXXXXXXXXXXXXX/formResponse',
// dataType: "xml",
data: tempData,
}).success(function(data,status){
//alert(data)
console.log("Success");
}).error(function(data,status) {
console.log('Error:' + status);
});
}

Its not about jquery or angular, CORS allows or disallow done by Back-end server.
Google might not support this.(to access https://docs.google.com)
CORS (Cross-Domain Resource Sharing) allows you to more cleanly separate your front-end from your back-end.
CORS is a group of special response headers sent from the server that tell a browser whether or not to allow the request to go through
Access-Control-Allow-Origin: http://example.com.
Why does jQuery throw an error when I request external resources using an Appcache Manifest?

I do have tried with angular still not able solve it, but with jQuery its works for me.
$.ajax({
url: 'https://docs.google.com/forms/d/xxxxxxxxx',
data: tempData,
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
alert('error');
},
200: function () {
alert('Thank you for your valuable feedback');
}
}
})

JSONP not working for cross domain AJAX

I've look at all the cross-domain ajax questions, and still cannot figure out what is wrong with my JSONP request. All I am trying to do is get the contents of an external page, cross domain using JSONP. Unfortunately, firefox still gives this:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://stackoverflow.com/?_=1415036764663. This can be fixed by moving the resource to the same domain or enabling CORS.
Code:
var url = "http://stackoverflow.com";
$.ajax({
url: url,
type: "GET",
datatype: "jsonp", //allows cross-domain ajax without cors (GET only)
async: true,
cache: false,
timeout: 15000,
success: function(html) {
console.log(html);
}
});

You have a small typo there:
…
dataType: "jsonp", // dataType instead of datatype
…
JavaScript variables and object properties are case-sensitive.