We Keep Coding

Fix CORS error without disabling security in chrome

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

How to append data from JSON file to HTML div?

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

ExtJS cross domain issue

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.

blockchain getjson javascript XMLHttpRequest

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

using $ajax to perform GET request from tomcat server always fail jQuery

I have backend webService on tomcat server.always when I perform any request (post, get),code enters on error method.
jQuery code is:
var jqxhr = $.ajax(
{
type:"GET",
url:url
success: function() {
alert("success");
},
error: function() {
alert("fail");
}
});
my url is:
http://"192.168.20.220":6060/NostServices/rest/user/resend_activation_email/mailex#blah.com
error message on log is:
XMLHttpRequest cannot load http://"192.168.20.220":8080/NostServices/rest/user/resend_activation_email/dsgg#sdfkmj.com.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://"192.168.20.220":8383' is therefore not allowed access.
web service server is tomcat.
response of this requset can be 1 for success and -1 for mail not valid
and always enter on fail method and when I try to alert response it output [object object]
thanks you for your help

It's a JSONP request so your server side script needs to return data wrapped in callback:
For example
var url = 'http://example.com/req.json?callback=?';
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
console.log(json);
},
error: function(e) {
console.log(e.message);
}
});
And on server side:
jsonCallback({});

As your error says your code is failing because of the cross domain error problem. A very detailed answer is found here:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access
Please put in some effort to google these issues, this is a very common thing your trying and all errors have been encountered before and have been resolved somewhere. People will get very annoyed here if you show no effort to debug it yourself or provide all the required detail such as:
All relevant code
Print out of any variables in the code e.g. URL's
Any error message
A list of things you have tried
On a side note a URL should not have quotes it it. It should not be
http://"192.168.1.1":.........
it should be:
http://192.168.1.1:........