Ajax POST request not working after allowing origin - javascript

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

Related

How to send OPTIONS Method call to server via ajax jquery/javascript?

I am trying to call an API that accepts OPTIONS method on server, it runs on postman and returns json object but following code is not working on js
I have read that OPTIONS call is a preflight call for CORS calls, so this API is https and on another server. But even then there is no response and it returns 405 method not found
$.ajax({
url: url,
dataType: "jsonp",
method :"OPTIONS",
crossDomain: true,
contentType: 'application/json',
headers: {
"Content-type": "application/json",
"Cache-Control": "no-cache",
"Accept": "application/json,long_format",
"Access-Control-Allow-Origin": "*"
},
success: function (data) {
console.log("success" + data);
},
error: function (data) {
console.log("fail" + data);
}
}).fail(function(data) {
console.log("failed" + data);
});
Extra info :
The API is cross domain and on ssl so to cover cross domain request I had to user dataType: "jsonp"
UPDATED :
This is impossible scenario so I have to get update on server end...
Explanation:
There is some problem with
OPTIONS method that is behind cross domain as well
a/c to some research i have done on internet, CORS request can be accessed with :
dataType: "jsonp",
but with -> dataType: "jsonp"
you can only call GET methods
so we are stuck here that allows that either we call cross domain https request or we can call OPTIONS method,
usually OPTIONS method is a preflight method done automatically by browser
NOW please stop down voting my question
dataType: "jsonp",
Take this out. JSONP requests are always GET requests. This is your main problem.
crossDomain: true,
Take this out. It does nothing unless you are making a same origin request that gets redirected to be a cross origin request.
contentType: 'application/json',
Take this out. You are making an OPTIONS request. There is no request body to describe the content-type of.
"Content-type": "application/json",
Take this out. For the same reason.
"Access-Control-Allow-Origin": "*"
Take this out. It is a response header and has no place on the request.

CORS/Preflight error with WorldPay AJAX request

I'm picking up on someone else work with a custom template, and I'm getting the following error:
Failed to load https://api.worldpay.com/v1/orders: Response to the preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx.xxx.xxx.xxx' is therefore not allowed access.
Here is the code that sends the AJAX request:
$.ajax({
type: "POST",
url: "https://api.worldpay.com/v1/orders",
dataType: 'json',
async: false,
headers: {
'Access-Control-Allow-Origin': '*',
"Authorization": worldPayServiceKey
},
data: JSON.stringify(options),
success: function (response){
if (response.paymentStatus == 'SUCCESS') {
current_booking.payment = obj.response;
} else {
alert("Sorry, there was a problem with your payment. We will send you an invoice instead.");
}
makeBooking();
}
});
I've had a similar problem with CORS before, but I haven't seen the preflight error before. Can anyone help, please?
please remove the Access-Control-Allow-Origin header from request header. that is a server side header.
Then add Content-Type as,
application/x-www-form-urlencoded,multipart/form-data or text/plain depending on what you are sending with the request. for example,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": worldPayServiceKey
},
The only allowed values for the Content-Type header are:
> - application/x-www-form-urlencoded
> - multipart/form-data
> - text/plain
for more info, read the MDN DOC.
Hope It helps. good luck.

How do I get CORS Post Request working after suggested fixes?

I know this has been asked before - hear me out, because this is not working for me. This is my AJAX function:
$.ajax({
method: 'POST',
url: "https://somedomain.org",
contentType: "application/json; charset=utf-8",
dataType: 'json',
crossDomain: true,
headers: {
"Access-Control-Allow-Origin": "http://www.example.org",
"Access-Control-Allow-Headers": "X-Foo",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
},
data: JSON.stringify(generateCartParams()),
context: document.body,
success: function (response) {
console.log(response);
}
});
However, this is still getting me an error:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Am I not configuring the settings right?
Edit: I am, of course, setting url and Access-Control-Allow-Origin to the correct addresses - these are just placeholders for this question.

$.ajax requests with CORS

I'm having troubles with an AJAX request. I was getting the below error:
Error: Access is denied
I tried this jQuery AJAX request:
$.support.cors = true;
$.ajax({
url: 'http://testwebsite.com/test',
type: "GET",
dataType: 'json',
contentType: 'application/json',
crossDomain: true,
headers: {
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Origin': 'http://testwebsite/test',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Credentials': 'true'
},
xhrFields: {
withCredentials: true
},
success: function(data) {
alert("Data from Server" + JSON.stringify(data));
},
error: function(jqXHR, textStatus, errorThrown) {
alert("You can not send Cross Domain AJAX requests: " + errorThrown);
}
});
Can anyone kindly let me know what I am missing. Thanks in advance.
As rory-mccrossan mentioned in a comment, CORS protection is designed so that a website cannot directly access the content of another website (in a browser) unless the website being accessed agrees to it.
It would completely ruin the point of CORS if a site just has to send some headers in order to circumvent the defence
Instead, you will need to use a CORS proxy. It's a server that when given a request like yourCORSproxy.example.com/http://testwebsite/test would load the page and return it, but with CORS allowed (like a normal proxy but with CORS enabled).
One of these CORS proxies is https://crossorigin.me, but at the time of writing this it is down. It might be more stable if you simply create your own proxy.
tl;dr: testsite.test should be sending the headers on its response. You should not be sending the headers on your request.

Facing issue while using CORS in a sample project

I have this code for sending in request to a website for ping.
I don't want to use jsonp (it works fine with that). I was trying to implement cors but still getting the issue of header "No 'Access-Control-Allow-Origin' header is present on the requested resource."
I kind of tried all the links online but non of them worked so far.
$.ajax({
url: 'https://example.com//payme/',
type: 'post',
crossDomain: true,
strictSSL: false,
data: JSON.stringify({
"test": false,
"language": "en",
"command": "PING",
"merchant": {
"apiLogin": "test",
"apiKey": "test"
}
}),
contentType: 'application/json; charset=utf-8',
headers: {
"Content-Type": "application/json; charset=utf-8",
'Accept': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods':'GET, POST, PUT'
},
dataType: 'json',
success: function (data) {
console.info(data);
}
});
CORS headers HAVE to be supplied by the server. They are NOT something you can add in your request from the client.
The server adds the CORS headers to the response and that gives the browser permission to allow the cross-origin request. If the CORS headers are not present, the browser will disallow the request. You can't fix this from the client. CORS has to be specifically supported on the server.

Categories