I'm developing a SaaS application, users create account and login in my SaaS system. Then, the SaaS application has a JS code that customers should include this JS code in their websites, and inside the code I need to send a POST Ajax Request to my SaaS domain (it's a cross-domain request).
The problem is that in order to share the credential of logged-in users, I have to set withCredentials property and Access-Control-Allow-Credentials header to true.
I'm not sure whether this is a good approach or not? Maybe I should use another approach like using OAuth or something to share the logged-in users credential...
I will appreciate any advices.
You need to be using JSONP as your type:
$.ajax(
{
type: "POST",
url: "http://test.com/api/getlist.json",
dataType: 'jsonp',
xhrFields: {
withCredentials: true
},
crossDomain: true,
beforeSend: function(xhr) {
xhr.setRequestHeader("Cookie", "session=xxxyyyzzz");
},
success: function(){
alert('success');
},
error: function (xhr) {
alert(xhr.responseText);
}
}
);
To enable cross domain requests with credentials, your server should support CORS. With CORS enabled your client code can add the withCredentials set to true to include cookies in the requests.
Related
-> Please Help Me To Solve The Problem
-> I Send Data To Another URL for Process Something And That Web Page is another Server and Different URL.
-> When Ever I Try To Send Post Data That time i Faced CROS Error i try many ways.
-> See My Code
$.ajax({
type: 'POST',
url: 'Another Non Https Url',
crossDomain: true,
contentType:'application/json',
data:{CompanyEmail:CompanyEmail,CompanyName:CompanyName,CompanyPhoneNumber:CompanyPhoneNumber,AccessToken:AccessToken},
success: function(){
alert("Success");
},
error: function(){
alert("Failed");
}
})
CORS (meaning "Cross Origin Resource Sharing") is a server-side mechanism to allow exceptions in the so-called Same-Origin-Policy. Otherwise processing data from another origin is prevented.
You have to explicitly enable CORS for your client within your server.
This can't be fixed in your client-side jQuery-Code.
PHP-side you are able to activate CORS for all clients by using
<?php
header("Access-Control-Allow-Origin: *");
?>
though.
When I test the code below it only fails
Any Ideas? The link works fine
$.ajax({
url: 'http://ulacit3352.cloudapp.net/Login/webresources/generic/search/gera',
type: 'GET',
datatype: 'json',
success: function(data) {
alert("works")
},
error: function() {
alert("it does not");
}
});
I get this on Chrome:
The response of the link is not of type "json", instead, it is a plain text, therefore it cannot be parsed. You should change to
dataType: 'text',
Also, for normal ajax, you need to make sure the url is in the same domain of the webpage, which means the code should reside at http://ulacit3352.cloudapp.net/ as well. Otherwise, you should seek for "jsonp" or (better) some server-side solution, such as setting Access-Control-Allow-Origin or make your server as a proxy of the request.
The requested url is server on http which will give rise to This request has been blocked; the content must be served over HTTPS error since the connection is open for eavesdropping and man-in-the-middle (MITM) attacks. It is better to use https provided the url accept https request.
Still there is way to bypass the issue. You can check this LINK
I'm working with an endpoint that seems to be built on Django.
Attempting to setup basic aJax communication to it via POST I wrote:
jQuery.ajax({
type: "POST",
url: "http://API-ENDPOINT-URL",
data: "",
dataType: "json",
crossDomain: false,
beforeSend: function(xhr){
xhr.withCredentials = false;
xhr.setRequestHeader('Authorization', 'Token <TOKEN THAT I WAS PROVIDED>' );
},
success: function(results)
{
reqListener(results)
}
});
With those code a few things happened:
I first got a CORS error since I'm trying to build on my local server. I installed this chrome extension to bypass it. (I have no access to the server to enable CORS)
2.I get this error in the console:
XMLHttpRequest cannot load http://API-ENDPOINT-URL. Response for
preflight has invalid HTTP status code 401
looking at the Chrome console for the network request I see this comes back:
{"detail":"Authentication credentials were not provided."}
What am I missing? Am I incorrectly sending the authentication token?
Doing token auth via Javascript without CORS enabled is a suicide mission.
Do yourself a favor like I did and just do it via server side.
I want to use a secure cookie which is stored by the browser when accessing the endpoint /access on my website. The cookie is saved during the login process and I made sure that my website runs on a subdomain of my backend (which creates the cookies for the clients).
My backend is running on www.welovecoding.com and my web application is hosted on webapp.welovecoding.com.
The cookie which I receive from my backend looks like this:
Set-Cookie:user_id=RLXXWNCGAyVBmnogfiE1ngFCpBRKA48YaFOGyrPypwvU3eZCA==;
Path=/access; Expires=Tue, 29-Sep-2015 17:37:11 GMT;
Domain=.welovecoding.com; HttpOnly; Secure
What I want to do now is a POST request on www.welovecoding.com/access with my cookie as authentication credentials. I am sending withCredentials when executing my AJAX request with jQuery:
$.ajax({
crossDomain: true,
type: 'POST',
url: "http://www.welovecoding.com/access",
xhrFields: {
withCredentials: true
}
}).done(function (data, textStatus, jqXHR) {
console.log("Response", data);
});
But I still do get a HTTP error 403 which says that the cookie is missing. Does anyone know why? Maybe because the cookie has HttpOnly and Secure set?
Yes, it's because the cookie has Secure set - and you are posting to http
;secure (cookie to only be transmitted over secure protocol as https)
https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
I'm trying to bring my json file into my HTML but a error Cross Domain is happening:
XMLHttpRequest cannot load http://guardioesdacidadania.com.br/game_temp/assets/js/caratulas.json?jsoncallback=. The request was redirected to 'http://www.guardioesdacidadania.com.br/game_temp/assets/js/caratulas.json?jsoncallback=', which is disallowed for cross-origin requests that require preflight.
I've tried many different solutions but none of them worked.
Here's my js code.
$.ajax({
url: 'http://guardioesdacidadania.com.br/game_temp/assets/js/caratulas.json?jsoncallback=',
headers: { 'Access-Control-Allow-Origin': '*' },
crossDomain: true,
success: function () { alert('it works') },
error: function() {alert('it doesnt work')},
datatype: 'jsonp'
});
For CORS support to work, the server must be configured to respond with the Access-Control-Allow-Origin header, sending the header with your request does nothing. You can see a bit of information on how to get this to work by visiting : Origin is not allowed by Access-Control-Allow-Origin
If you do not have access to the server, then it is not possible to do it via AJAX so you'll need to create some sort of server side proxy to relay the request through.