Errror using API in chrome browser - javascript

I don't know how to fix this issue with using an API. It give me a browser error that says:
Access to XMLHttpRequest at
'file:///C:/Users/Gebruiker/Desktop/PokeMax/GET%20https://api.pokemontcg.io/v2/cards?s'
from origin 'null' has been blocked by CORS policy: Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, chrome-untrusted, https. jquery-3.4.1.min.js:2 GET
file:///C:/Users/Gebruiker/Desktop/PokeMax/GET%20https://api.pokemontcg.io/v2/cards?s
net::ERR_FAILED
If someone knows what the issue is I would love to hear it!
code:
$(document).ready(function (e) {
$("#TheSubmitButton").on("click", function(event){
event.preventDefault();
var Pokemon = $("#search")
.val()
.trim()
console.log(Pokemon);
$.ajax({
url: "GET https://api.pokemontcg.io/v2/cards?" + Pokemon,
dataType: 'json',
method: "GET"
});
});
});
// for (var i = 0; i < response.cards.length; i++) {
// var pokemonCard = $("<img>");
// pokemonCard.attr("src", response.cards[i].imageUrlHiRes);
// $("#card-container").append(pokemonCard);
// }

Related

GoogleDrive API (javascript): no file download because of CORS

With this code, before an year about i could get the file via XMLHttpsRequest.
Now this do not more work, because of the error:
Access to XMLHttpRequest at 'https://drive.google.com/uc?id=1zGxNBh-YTAXu74v855l2b_LPmLUaomqZ&export=download' from origin 'https://encrypt.pdfzorro.com' 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.
Is there a way at now, to get the file via javascript. I can not use any server solution, the file should go direct from googleDrive to the browser from the user.. without go on a server (with php e.g.) first.
function downloadFileContent(fileId){
gapi.client.request({
'path': '/drive/v2/files/' + fileId,
'method': 'GET',
callback: function ( theResponseJS, theResponseTXT ) {
var myToken = gapi.auth.getToken();
var myXHR = new XMLHttpRequest();
myXHR.open('GET', theResponseJS.downloadUrl, true );
myXHR.responseType = 'arraybuffer';
myXHR.setRequestHeader('Authorization', 'Bearer ' + myToken.access_token );
myXHR.onreadystatechange = function( theProgressEvent ) {
if (myXHR.readyState == 4) {
// 1=connection ok, 2=Request received, 3=running, 4=terminated
if ( myXHR.status == 200 ) {
// 200=OK
cossole.log(myXHR.response);
}
}
}
myXHR.send();
}
});
}

Mapbox Geocoding API - 'Cross-Origin Request Blocked' error

I'm trying to call Geocoding API but I'm not having any luck. I keep receiving the following error.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.mapbox.com/gecoding/v5/mapbox.places/fort%20coll…7nugng&autocomplete=true&bbox=-105.214,40.451,-104.85,40.841. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
When I add the header it says it can't run the script. Not sure what else to do. My link is formated properly because it works in mapbox search-Playground
var searchId = document.getElementById('mySearch');
searchId.addEventListener('keyup', function onEvent(e) {
if (e.keyCode === 13) {
console.log(searchId.value)
var urlBase = 'https://api.mapbox.com/gecoding/v5/mapbox.places/';
var location = searchId.value;
var bbox = [-105.214, 40.451, -104.850, 40.841]
var query = urlBase + location + '.json?access_token=' + mapboxgl.accessToken + '&autocomplete=true&bbox=' + bbox;
$.ajax({
method: 'GET',
url: query,
success: function(data){
console.log(data)
}
})
}
});

Download Google Drive file from url and send with post to backend

I am trying to download a file from an url (chrome drive file) in javascript; and want to send it to my backend (php - laravel).
var url = file.downloadUrl !== undefined ? file.webContentLink : file.exportLinks['application/pdf'];
console.log(url) // if I go to url, it downloads the file
if (url !== undefined) {
var remote = new XMLHttpRequest();
remote.open('GET', url);
remote.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);
remote.setRequestHeader('Access-Control-Allow-Origin', '*');
remote.onload = function(e) {
vm.handle_download(remote.responseText, file, 200); // do something with the fetched content;
};
remote.onerror = function(e) {
vm.handle_download('error response', null, remote.statusText);
};
remote.send();
} else vm.handle_download('no downloadable url', {
file: null,
status: 'error'
});
and on handle
handle_download: function (content, file, status) {
if (status !== 200) {
console.log('error occured on status')
return;
}
}
Failed to load https://drive.google.com/uc?id=1D12321ofd4CNG-m9_Mp4aiDcnibNf&export=download: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://test.dev' is therefore not allowed access.
This is an intended behavior due to same origin policy in the web. Since you're doing this for testing purposes, try this Allow-Control-Allow-Origin chrome extension.
You can read more about how to implement this in Using CORS tutorial.
This SO post may also offer additional insight.

Cross Origin Resource Sharing Issue with jQuery on https secure url?

I'm having a slight issue with a cross site origin request. I'm sure it is a simple fix.
Console error:
XMLHttpRequest cannot load https://subdomain.example.com/social/disqus. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.example.com' is therefore not allowed access.
js script causing the issue:
window.onload = function(){
//jQuery AJAX GET Method on Disqus Threads
$.ajax({
type: 'GET',
url: 'https://subdomain.example.com/social/disqus',
contentType: 'application/json; charset=utf-8',
success: function(threads) {
var len = Object.keys(threads.response).length
for (i = 0; i < len; i++){
if (threads.response[i].posts == 0 || threads.response[i].posts != 1) {
$('#' + threads.response[i].identifiers).html(threads.response[i].posts + " Comments ");
} else {
$('#' + threads.response[i].identifiers).html(threads.response[i].posts + " Comment ");
}
}
},
error: function() {
console.log("Aw, snap!");
}
});
};
I'm forcing redirects in Apache for both - this may be an issue, but it looks like the CORS request is being fired from a https:// valid site to another https:// valid site... url in the ajax request is definitely https.
I'm wondering if I am missing something from $.ajax ?

Parse.com - Cross-Origin Request Blocked

I'm new to parse and javascript. i'm going through a very simple tutorial at Parse.com (https://parse.com/apps/quickstart#parse_data/web/new) and created the following block of code. It works on chrome and IE but not safari or firefox. I got the cross-origin request blocked error on firefox. Could you please help?
Firefox Error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.parse.com/1/classes/things.
This can be fixed by moving the resource to the same domain or enabling CORS.
My Code:
var PARSE_APP = "XXX";
var PARSE_JS = "XXX";
$(document).ready(function () {
Parse.initialize(PARSE_APP, PARSE_JS);
$("#FinishQuiz").click(function () {
var ShoulderStrap = "";
if ($("#ShoulderStrap1").prop("checked"))
{ ShoulderStrap = "1" }
if ($("#ShoulderStrap2").prop("checked"))
{ ShoulderStrap = "2" }
if ($("#ShoulderStrap3").prop("checked"))
{ ShoulderStrap = "3" }
NoteObject = Parse.Object.extend("things");
var object = new NoteObject();
object.save({ ShoulderStrap: ShoulderStrap }).then(function (object) {
alert("yay! it worked");
});
});

Categories

Resources