I am attempting to loop through the JSON file and append each instance of "sliderLink" to a preexisting DIV, however it appears it is not working.
I am getting the following error code in the console:
Access to XMLHttpRequest at 'http://www.coopertimewell.com/mainSlider.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How do I fix this?
But this seems to be working in jsbin
<div class="custom-container">
</div>
<script>
//populate timeline select menu
$(document).ready(function() {
$.ajax({
url: 'http://www.coopertimewell.com/mainSlider.json',
type: 'GET',
dataType: "json",
crossorigin: true,
success: fillInFields
});
});
function fillInFields(data) {
var pictureURLArray = [];
$.each(data, function(index, value) {
pictureURLArray.push(value.sliderLink);
});
var lengthDatabase = Object.keys(data).length;
for (i = 0; i < lengthDatabase; i++) {
$(".custom-container").append(pictureURLArray[i]);
}
};
</script>
You should check console of this request (F12 and choose Console tab)
$.ajax({
url: 'http://www.coopertimewell.com/mainSlider.json',
type: 'GET',
dataType: "json",
crossorigin: true,
success: fillInFields
});
if have error like as: Access to XMLHttpRequest at 'http://www.coopertimewell.com/mainSlider.json' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
You should install Moesif Origin & CORS Changer extension for Chrome and setting like as below:
[]
After that turn on this extension and try it.
This is a question about how to support CORS. You should read the questions like this:Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?
Anyway, the simpliest fix for you is to change dataType: "json" to "jsonp".
So it turns out the actual URL was causing the issue.
Only change that I had to make:
$(document).ready(function() {
$.ajax({
url: 'mainSlider.json',
type: 'GET',
dataType: "json",
crossorigin: true,
success: fillInFields
});
});
Related
I have a javascript code which loads json data from some json_url using ajax requests I am getting folloowing error when running the html in chrome
Access to XMLHttpRequest at json_url from origin 'http://localhost:8000' 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.
To fix this error I am opening chrome by disabling web security through the following command
google-chrome --disable-web-security --user-data-dir="/tmp/chrome_dev_test"
Is there anyway to fix this error so that I can run html on chrome without disabling web security every time?
front-end code used:
function getJSON(url){
$.ajax({
type:'GET',
url:url,
dataType:'json',
contentType:'application/json',
timeout: 3000,
success:function(data){
//do something with data
}
});
}
You need to enable CORS on your server side. Here's a guide for many servers, use what suits you.
https://enable-cors.org/server.html
Also in your client-side code, when you specify your request add that it's a CORS request. For example:
$.ajax({
url: "http://www.someotherdomain.com",
type: "POST",
crossDomain: true, //<-- this right here
data: JSON.stringify(somejson),
dataType: "json",
success: function (response) {
// ...
},
error: function (xhr, status) {
// ...
}
});
I have a problem with JSON query.
I research on the forum and a lot of other websites to find how to fix the problem, but I used probably all of the options to repair my script...
At the moment my script:
jQuery.ajax({
url: "http://target.xyz/?f=json",
dataType: 'JSONP',
jsonpCallback: 'callback',
type: 'GET',
success: function (data) {
console.log(data);
}
});
Before the script, I use normal JSON but I saw:
XMLHttpRequest cannot load http://target.xyz/?f=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mypage.xyz' is therefore not allowed access.
When I use JSONP on my target website, I get data but website returned:
one error Uncaught SyntaxError: Unexpected token :
Response data:
{
"date" : "2017-05-29",
"gold" : "1267.00",
"silver" : "17.39",
"platinum" : "956.05"
}
Please give me some advice or links. Thanks.
I am using the postman rest client on Brackets.
Using that client I can request the Gogs api.
But if I want to request it using jquery I get a:
XMLHttpRequest cannot load http://xxx.xxx.xxx.xxx:3000/api/v1/repos/.../.../issues?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
This is my js code:
var request = $.ajax({
url: apiUrl+'repos/.../.../issues?token='+token,
method: "GET",
dataType: "json",
crossDomain: true
});
request.done(function( data ) {
resolve('it works', data);
});
request.fail(function( jqXHR, textStatus ) {
reject(jqXHR, textStatus);
});
Any ideas how to solve this problem?
Edit:
At the moment it is only for developement. Therefore I can use this Chrome extension: Allow-Control-Allow-Origin: *
I'm new to extjs and i'm facing problem with crossdomain issue.
Ext.Ajax.request({
method: "POST",
url:'url',
params:{
ahq_id: '104',
username:'',
password:'',
callback:'WCL_Parser',
},
async: true,
dataType: 'jsonp',
success: function(response){
console.info(response);
}
});
I'm getting error as
XMLHttpRequest cannot load http://182.73.236.115:8080/WCLRESTService/rest/Map/showVehiclesOnMap. 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:8282' is therefore not allowed access.
Even i tried with callback function also
function WCL_Parser(data){
console.info(data);
}
The error is not resolved. Thanks in advance.
I'm trying to get a bitcoin address info using the Blockchain.info API but it doesn't work. I get allways the same error:
XMLHttpRequest cannot load https://blockchain.info/address/13DKdDeZcdLbGoNquWz8nHBnVpfBVkDitz?format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:57366' is therefore not allowed access.
My code is:
$.getJSON("https://blockchain.info/address/13DKdDeZcdLbGoNquWz8nHBnVpfBVkDitz?format=json",
function(data) {$('#blockchain').append(JSON.stringify(data));
});
I've tryed the same code with another API and it works:
$.getJSON("http://btc.blockr.io/api/v1/address/txs/13DKdDeZcdLbGoNquWz8nHBnVpfBVkDitz",
function(data) {$('#blockr').append(JSON.stringify(data));
});
The problem is that I need some information that is only available by the blockchain API.
Any idea?
Try to use dataType: 'jsonp' instead:
$.ajax({
url: 'https://blockchain.info/address/13DKdDeZcdLbGoNquWz8nHBnVpfBVkDitz?format=json',
dataType: 'jsonp',
success: function (data) {
$('#blockchain').append(JSON.stringify(data));
},
error: function () {}
});