Facing issue while using CORS in a sample project - javascript

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.

Related

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

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.

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.

Not able to send header with xhrfield

I am trying to get flipkart api data . like this but i am not able to send heder with xhrfield
HERE IS MY CODE :
$.ajax({
type: 'GET',
url:'https://affiliate-api.flipkart.net/affiliate/search/json?query=iPhone+mobiles&resultCount=3',
crossDomain: true,
// dataType: 'JSONP',
/*xhrFields: {
withCredentials: true
},*/
// contentType: 'application/json; charset=utf-8',
beforeSend : function(xhr) {
xhr.withCredentials = true;
xhr.setRequestHeader('Fk-Affiliate-Id', 'myid');
xhr.setRequestHeader('Fk-Affiliate-Token', 'mytoken');
},
/* headers: {
'Access-Control-Allow-Origin':'*',
'Fk-Affiliate-Id': 'myid',
'Fk-Affiliate-Token': 'mytoken',
'Content-Type': 'application/x-www-form-urlencoded'
},*/
success: function(data){ ......
}
});
As you can see comment i ahve tried both but not able to send header with xhrfield . if i comment xhrfield header wil be send
You can not send a header with a JSONP requests since all it does is set a script tag to the page.
A JSONP requests consists of appending a script tag to the page. It adds a callback parameter to the URL which the script listens for when the script is executed. There is no way to add the header to a external script.
The site would need to support JSON request for CORs to send the header.

Categories