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

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

Related

Errror using API in chrome browser

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

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

No 'Access-Control-Allow-Origin' header is present on the requested resource. (google contacts api)

I am trying to get photo of google contact. from api guide found this:
https://www.google.com/m8/feeds/photos/media/{userEmail}/{contactId}
my code:
`$.get("https://www.google.com/m8/feeds/photos/media/default/54b8abe0f52ad02?access_token=" + authorizationResult.access_token + "&v=3.0",
function(response){
//process the response here
console.log(response);
}
);`
it gives me this error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
but this seems to be working fine
`$.get("https://www.google.com/m8/feeds/contacts/default/full?alt=json&access_token=" + authorizationResult.access_token + "&max-results=500&v=3.0",
function(response){
//process the response here
console.log(response);
}
);`
Edit:
full js script:
`
<script type="text/javascript">
var clientId = 'my client id';
var apiKey = 'api key';
var scopes = 'https://www.googleapis.com/auth/contacts.readonly';
$(document).on("click",".googleContactsButton", function(){
gapi.client.setApiKey(apiKey);
window.setTimeout(authorize);
});
function authorize() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthorization);
}
function handleAuthorization(authorizationResult) {
if (authorizationResult && !authorizationResult.error) {
$.get("https://www.google.com/m8/feeds/photos/media/default/54b8abe0f52ad02?access_token=" + authorizationResult.access_token + "&v=3.0",
function(response){
//process the response here
console.log(response);
}
);
}
}
</script>
`
I got the picture by doing this: (prefix image url with proxy url)
` function handleAuthorization(authorizationResult) {
if (authorizationResult && !authorizationResult.error) {
console.log(authorizationResult);
var accessToken = authorizationResult.access_token;
$.get("https://www.google.com/m8/feeds/contacts/default/thin?alt=json&access_token=" + accessToken + "&max-results=500&v=3.0",
function(response){
//process the response here
console.log(response);
let photoUrl = response.feed.entry[2].link[0].href + "&access_token=" + accessToken;
let proxy = 'https://cors.now.sh/';
let finalPhotoUrl = proxy + photoUrl;
document.getElementById('photo').src = finalPhotoUrl;
}
);
}
}`

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