We Keep Coding

Ajax POST request not working after allowing origin

I have an Ajax request that looks like this:
$.ajax({
url: "http://some-api.com/endpoint/",
type: "POST",
contentType: "application/json",
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json'
},
data: '"data": "20200312',
dataType: "json",
success: function (data) {
console.log(data);
}
});
});
I've tried almost everything, but for some reason I keep getting the same error:
Access to XMLHttpRequest at 'http://some-api.com/endpoint/' from origin 'http://127.0.0.1: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
What am I doing wrong or missing. I am using Django as my backend. Also it works in Postman, but doesn't work through Ajax

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

Javascript AJAX call response status 200 OK but error callback is called

I am making this call:
$.ajax({
type: 'GET',
cache: false,
timeout: 20000,
async: true,
url: "http://search.carrotsearch.com/carrot2-webapp/search",
dataType: 'text',
data: {
query:'london',
results:'100',
source:'etools',
algorithm:'lingo3g',
view:'folders',
skin:'fancy-compact',
type:'DOCUMENTS'
},
success: function(msg) {
debugger;
},
error: function(err,textStatus, errorThrown){
debugger;
}
});
`
Fiddler shows response OK 200 and returns correct gzipped contents. But in browser debugger the error callback is called:

There problem is CORS. http://search.carrotsearch.com/ doesn't allow AJAX requests.
Look for following error in console.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:XXX' is therefore not allowed
access.
It can be that my localhost is not listed on http://search.carrotsearch.com/ server. But, I guess in your case too this is the issue.

Gogs API jquery access allow origin

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: *