I created a form to add slots in my web application. I created a lambda authorizer for my route in API gateway.
API route is functional in postman with lambda authorizer. However once I connect it to the front end I am getting errors which I am not sure how to solve.
Error in console
CORS configuration
Javascript code to add slot and validate user's access token
function addSlots() {
var response = "";
var jsonData = new Object();
jsonData.restaurant_name_date_time = document.getElementById("date_time_slot").value;
jsonData.number_of_pax = document.getElementById("number_of_pax_2").value;
jsonData.restaurant_name = document.getElementById("restaurant_name_slot").value;
// validate the access token
var access_token = document.getElementById("access_token").value;
var request = new XMLHttpRequest();
request.open("POST", "https://aba3bnzddd.execute-api.us-east-1.amazonaws.com/slots", true);
request.setRequestHeader("Authorization", "Bearer " + access_token);
request.onload = function () {
response = JSON.parse(request.responseText);
console.log(response)
if (response.message == "slot added") {
alert('Congrats! You have succesfully added a slot');
} else if (response.message == "forbidden") {
alert('Invalid token. Please enter a valid access token.');
} else {
alert('Error. Unable to add slot.');
}
};
request.send(JSON.stringify(jsonData));
}
Lambda Authorizer Code
import json
def lambda_handler(event, context):
if event['headers']['authorization'] == 'secretcode':
response = {
"isAuthorized": True,
"context": {
"anyotherparam": "values"
}
}
return response
else:
response = {
"isAuthorized": False,
"context": {
"anyotherparam": "values"
}
}
return response
Try to return the CORS headers using your own code that runs in the Lambda function. E.g. something like this:
let headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "POST, GET, OPTIONS, HEAD",
"Access-Control-Allow-Headers": "*",
};
// Lambda function response to API Gateway...
return {
statusCode: 200,
headers: headers,
body: ...
};
I am trying to do a post request withCredentials = true, but I get a CORS error on the console after sending the request.
This is the Controller I am trying to reach:
[RoutePrefix("Account")]
public class AccountController : ApiController;
This is the Action I am trying to reach:
[HttpPost]
[Route("Login")]
public IHttpActionResult Login(LoginDto dto);
I have added this line in WebApiConfig:
config.EnableCors(new EnableCorsAttribute("http://localhost", "*", "*"));
And here is what I use to do Post Requests with Javascript
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
if (xhr.withCredentials != undefined) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
function post(url, data) {
return new Promise(
function httpPromise (resolve, reject) {
var request = createCORSRequest("post", url);
if (request) {
request.setRequestHeader('Accept', 'application/json');
request.setRequestHeader('Content-Type', 'application/json');
request.onloadend = function (progress) {
var status = request.status;
var result = JSON.parse(request.response || "null");
if (status >= 200 && status < 300) resolve(result);
else reject(result ? result.Message || result : result);
};
request.send(data);
}
});
}
Below is the Error Message that appears in the console.
XMLHttpRequest cannot load http://localhost:54368/Account/Login. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
You need to give specify SupportsCredentials = true in your config.EnableCors(…) call:
config.EnableCors(new EnableCorsAttribute("http://localhost", "*", "*")
{ SupportsCredentials = true });
I'm encountering an issue while trying to retrieve an access token using the Strava API: https://strava.github.io/api/v3/oauth/
My initial code request and callback function properly, but when attempting to hit the /oauth/token URL I fail in two different ways. The first:
console.log('Posting to /token with code: ' + code);
Ember.$.ajax({
type: 'POST',
url: 'https://www.strava.com/oauth/token',
data: 'client_id=<myid>&client_secret=<mysecret>&code=' + code,
success: function(data) {
var jsonData = JSON.stringify(data);
var accessToken = jsonData.access_token;
console.log('Received access token: ' + accessToken);
if (accessToken) {
this.get("controllers.application").set('settings.strava.accessKey', accessToken);
}
},
error: function(jqXHR, textStatus) {
console.log('API auth error occurred: ' + JSON.stringify(error));
throw new Error(error);
}
});
Prints Posting to /token with code: 3ae248f... and the HTTP request comes back with a 200 response (in the Chrome debugger Network tab), but I can't actually see the response contents/data in the debugger, and the browser console complains with:
XMLHttpRequest cannot load https://www.strava.com/oauth/token. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:4200' is therefore not allowed
access.
But then if I add a few options to my above request:
crossDomain: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'DELETE, HEAD, GET, OPTIONS, POST, PUT',
'Content-Type': 'application/json;charset=UTF-8'
},
Then an OPTIONS request goes out first (to the /oauth/token endpoint), and comes back with 302 Found, but I then see a different error in the browser console:
XMLHttpRequest cannot load https://www.strava.com/oauth/token. Response for preflight is invalid (redirect)
CORS is not something I have a huge amount of experience with, this is where I have run out of ideas.
The following works fine in my Cordova App:
var c_id = "YOUR_ID_HERE";
var c_secret = "YOUR_SECRET_HERE";
var access_code = "YOUR_AUTH_HTTP_CODE_HERE";
var params = "client_id=" + c_id + "&client_secret=" + c_secret + "&code=" + access_code;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("POST", "https://www.strava.com/oauth/token", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
For the preflight requests response should ends up with status 200 Ok and contains at least Access-Control-Allow-Origin: your origin
I have an existing java client on top of which IOS, andriod developers prepared a simple http request based applications. And am trying to achieve same in HTML5 app.
And the difficulty right now am facing is sending an custom header within the AJAX request like authorization with encrypted login details.
I tried to achieve same on various REST clients and able to send "AUTHORIZATION : BASIC XXXXXX=" in request header. And getting proper json response"
But if i try same using ajax call am not able to send similar request header. Request sending as OPTIONS instead of GET and the authorization tag is not going properly as a header instead it's going as "Access-Control-Request-Headers:authorization".
and here is the snippets i have tried.
<script>
//$.ajaxSetup({ headers: { 'Authorization': 'Basic XXXXXXX='} })
// get form data for POSTING
var vFD = new FormData(document.getElementById('upload_form'));
var oXHR = new XMLHttpRequest();
oXHR.open('POST', "https://123.123.123.123:229/");
//oXHR.send(vFD);
var body = 'Basic XXXXXXX=';
var mUrl = "https://123.123.123.123:229/?json";
var client = new XMLHttpRequest();
client.open('GET', mUrl, true);
client.withCredentials = true;
client.crossDomain = true,
client.setRequestHeader('Authorization', 'Basic XXXXXXX=');
client.send(body);
simpleHttpRequest();
function simpleHttpRequest() {
alert("calling ");
var headers = {
"Authorization": "Basic XXXXXXX="
};
$.ajaxSetup({ "headers": headers });
$.ajaxSetup({ 'cache': false });
$.ajax({
type: "GET",
withCredentials: true,
// data: {
// address: 'http://www.google.com'
// },
crossDomain: true,
Headers: { "Authorization": "Basic XXXXXXX=" },
dataType: "jsonp",
url: mUrl,
cache: false
});
}
xhrToSend();
function xhrToSend() {
// Attempt to creat the XHR2 object
var xhr;
try {
xhr = new XMLHttpRequest();
} catch (e) {
try {
xhr = new XDomainRequest();
} catch (e) {
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
statusField('\nYour browser is not' +
' compatible with XHR2');
}
}
}
}
xhr.withCredentials = true;
xhr.open('GET', mUrl, true);
xhr.setRequestHeader("Authorization", "numberOfBLObsSent");
xhr.send();
};
</script>
And all the different ways getting failed. Please help me.
Thanks in advance.
The issue is related to the cross-domain nature of the request. When you make a cross-domain request which contains custom headers, the request is first "preflighted" to the server via the OPTIONS method, and the server must respond with a header Access-Control-Allow-Headers: your-custom-header. Once this is received, the ajax client will then (automatically) issue the actual request.
More on preflighted requests
Is there a way to send data using the POST method without a form and without refreshing the page using only pure JavaScript (not jQuery $.post())? Maybe httprequest or something else (just can't find it now)?
You can send it and insert the data to the body:
var xhr = new XMLHttpRequest();
xhr.open("POST", yourUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: value
}));
By the way, for get request:
var xhr = new XMLHttpRequest();
// we defined the xhr
xhr.onreadystatechange = function () {
if (this.readyState != 4) return;
if (this.status == 200) {
var data = JSON.parse(this.responseText);
// we get the returned data
}
// end of state change: it can be after some time (async)
};
xhr.open('GET', yourUrl, true);
xhr.send();
The Fetch API is intended to make GET requests easy, but it is able to POST as well.
let data = {element: "barium"};
fetch("/post/data/here", {
method: "POST",
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
}).then(res => {
console.log("Request complete! response:", res);
});
If you are as lazy as me (or just prefer a shortcut/helper):
window.post = function(url, data) {
return fetch(url, {method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)});
}
// ...
post("post/data/here", {element: "osmium"});
You can use the XMLHttpRequest object as follows:
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.send(someStuff);
That code would post someStuff to url. Just make sure that when you create your XMLHttpRequest object, it will be cross-browser compatible. There are endless examples out there of how to do that.
Also, RESTful lets you get data back from a POST request.
JS (put in static/hello.html to serve via Python):
<html><head><meta charset="utf-8"/></head><body>
Hello.
<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "/postman", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: 'value'
}));
xhr.onload = function() {
console.log("HELLO")
console.log(this.responseText);
var data = JSON.parse(this.responseText);
console.log(data);
}
</script></body></html>
Python server (for testing):
import time, threading, socket, SocketServer, BaseHTTPServer
import os, traceback, sys, json
log_lock = threading.Lock()
log_next_thread_id = 0
# Local log functiondef
def Log(module, msg):
with log_lock:
thread = threading.current_thread().__name__
msg = "%s %s: %s" % (module, thread, msg)
sys.stderr.write(msg + '\n')
def Log_Traceback():
t = traceback.format_exc().strip('\n').split('\n')
if ', in ' in t[-3]:
t[-3] = t[-3].replace(', in','\n***\n*** In') + '(...):'
t[-2] += '\n***'
err = '\n*** '.join(t[-3:]).replace('"','').replace(' File ', '')
err = err.replace(', line',':')
Log("Traceback", '\n'.join(t[:-3]) + '\n\n\n***\n*** ' + err + '\n***\n\n')
os._exit(4)
def Set_Thread_Label(s):
global log_next_thread_id
with log_lock:
threading.current_thread().__name__ = "%d%s" \
% (log_next_thread_id, s)
log_next_thread_id += 1
class Handler(BaseHTTPServer.BaseHTTPRequestHandler):
def do_GET(self):
Set_Thread_Label(self.path + "[get]")
try:
Log("HTTP", "PATH='%s'" % self.path)
with open('static' + self.path) as f:
data = f.read()
Log("Static", "DATA='%s'" % data)
self.send_response(200)
self.send_header("Content-type", "text/html")
self.end_headers()
self.wfile.write(data)
except:
Log_Traceback()
def do_POST(self):
Set_Thread_Label(self.path + "[post]")
try:
length = int(self.headers.getheader('content-length'))
req = self.rfile.read(length)
Log("HTTP", "PATH='%s'" % self.path)
Log("URL", "request data = %s" % req)
req = json.loads(req)
response = {'req': req}
response = json.dumps(response)
Log("URL", "response data = %s" % response)
self.send_response(200)
self.send_header("Content-type", "application/json")
self.send_header("content-length", str(len(response)))
self.end_headers()
self.wfile.write(response)
except:
Log_Traceback()
# Create ONE socket.
addr = ('', 8000)
sock = socket.socket (socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind(addr)
sock.listen(5)
# Launch 100 listener threads.
class Thread(threading.Thread):
def __init__(self, i):
threading.Thread.__init__(self)
self.i = i
self.daemon = True
self.start()
def run(self):
httpd = BaseHTTPServer.HTTPServer(addr, Handler, False)
# Prevent the HTTP server from re-binding every handler.
# https://stackoverflow.com/questions/46210672/
httpd.socket = sock
httpd.server_bind = self.server_close = lambda self: None
httpd.serve_forever()
[Thread(i) for i in range(10)]
time.sleep(9e9)
Console log (chrome):
HELLO
hello.html:14 {"req": {"value": "value"}}
hello.html:16
{req: {…}}
req
:
{value: "value"}
__proto__
:
Object
Console log (firefox):
GET
http://XXXXX:8000/hello.html [HTTP/1.0 200 OK 0ms]
POST
XHR
http://XXXXX:8000/postman [HTTP/1.0 200 OK 0ms]
HELLO hello.html:13:3
{"req": {"value": "value"}} hello.html:14:3
Object { req: Object }
Console log (Edge):
HTML1300: Navigation occurred.
hello.html
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".
hello.html (1,1)
Current window: XXXXX/hello.html
HELLO
hello.html (13,3)
{"req": {"value": "value"}}
hello.html (14,3)
[object Object]
hello.html (16,3)
{
[functions]: ,
__proto__: { },
req: {
[functions]: ,
__proto__: { },
value: "value"
}
}
Python log:
HTTP 8/postman[post]: PATH='/postman'
URL 8/postman[post]: request data = {"value":"value"}
URL 8/postman[post]: response data = {"req": {"value": "value"}}
You can use XMLHttpRequest, fetch API, ...
If you want to use XMLHttpRequest you can do the following
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
name: "Deska",
email: "deska#gmail.com",
phone: "342234553"
}));
xhr.onload = function() {
var data = JSON.parse(this.responseText);
console.log(data);
};
Or if you want to use fetch API
fetch(url, {
method:"POST",
body: JSON.stringify({
name: "Deska",
email: "deska#gmail.com",
phone: "342234553"
})
}).then(result => {
// do something with the result
console.log("Completed with result:", result);
}).catch(err => {
// if any error occured, then catch it here
console.error(err);
});
There is an easy method to wrap your data and send it to server as if you were sending an HTML form using POST.
you can do that using FormData object as following:
data = new FormData()
data.set('Foo',1)
data.set('Bar','boo')
let request = new XMLHttpRequest();
request.open("POST", 'some_url/', true);
request.send(data)
now you can handle the data on the server-side just like the way you deal with reugular HTML Forms.
Additional Info
It is advised that you must not set Content-Type header when sending FormData since the browser will take care of that.
Did you know that JavaScript has it's built-in methods and libs to create forms and submit them?
I am seeing a lot of replies here all asking to use a 3rd party library which I think is an overkill.
I would do the following in pure Javascript:
<script>
function launchMyForm()
{
var myForm = document.createElement("FORM");
myForm.setAttribute("id","TestForm");
document.body.appendChild(myForm);
// this will create a new FORM which is mapped to the Java Object of myForm, with an id of TestForm. Equivalent to: <form id="TestForm"></form>
var myInput = document.createElement("INPUT");
myInput.setAttribute("id","MyInput");
myInput.setAttribute("type","text");
myInput.setAttribute("value","Heider");
document.getElementById("TestForm").appendChild(myInput);
// To submit the form:
myForm.method = "POST";
myForm.action = "whatever.aspx"; // or "response.php"
myForm.submit();
// This will create an INPUT equivalent to: <INPUT id="MyInput" type="text" value="Heider" /> and then assign it to be inside the TestForm tags.
}
</script>
This way (A) you don't need to rely on 3rd parties to do the job. (B) It's all built-in to all browsers, (C) faster, (D) it works, feel free to try it out.
I hope this helps.
H
navigator.sendBeacon()
If you simply need to POST data and do not require a response from the server, the shortest solution would be to use navigator.sendBeacon():
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
navigator.sendBeacon('example.php', data);
The most popular answers here do not show how to get data back from the POST. Also, the popular "fetch" solutions do not work in the latest version of Chrome when sending data to the latest version of NodeJS unless you pass headers and also unwrap the response.json() promise. Also, the popular answers do not use async/await.
Here is the cleanest and most complete solution I could come up with that works.
async function postJsonData(jsonObject) {
const response = await fetch("/echo", {
method: "POST",
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(jsonObject)
});
const actualResponse = await response.json();
}
Here is a nice function you (or anyone else) could use in their code:
function post(url, data) {
return new Promise((res, rej) => {
let stringified = "";
for (const [key, value] of Object.entries(data))
stringified += `${stringified != '' ? '&' : ''}${key}=${value}`
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4)
if (xhr.status == 200)
res(xhr.responseText)
else
rej({ code: xhr.status, text: xhr.responseText })
}
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(stringified);
})
}
const data = { username: 'example' };
fetch('https://example.com/profile', {
method: 'POST', // or 'PUT'
headers: {
' Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
You can also use this: https://github.com/floscodes/JS/blob/master/Requests.js
You can easily send a http-Request. Just use:
HttpRequest("https://example.com", method="post", data="yourkey=yourdata");
That's it! It should even work if the site is CSRF-protected.
Or just send a GET-Request by using
HttpRequest("https://example.com", method="get");
use this func of jbezz library
var makeHttpObject = function () {
try {return new XMLHttpRequest();}
catch (error) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch (error) {}
try {return new ActiveXObject("Microsoft.XMLHTTP");}
catch (error) {}
throw new Error("Could not create HTTP request object.");
}
function SendData(data){
let type = (data.type ? data.type : "GET")
let DataS = data.data;
let url = data.url;
let func = (data.success ? data.success : function(){})
let funcE =(data.error ? data.error : function(){})
let a_syne = (data.asyne ? data.asyne : false);
let u = null;
try{u = new URLSearchParams(DataS).toString();}catch(e){u = Object.keys(DataS).map(function(k) {return encodeURIComponent(k) + '=' + encodeURIComponent(DataS[k])}).join('&')}
if(type == "GET"){url +="?"+u}
const xhttp = makeHttpObject();
xhttp.onload = function(){func(this.responseText)}
xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4)
{if(xmlHttp.status !== 200){funcE(xmlHttp.statusText)}}}
xhttp.open(type,url,a_syne);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(u);
}
use this to run :
SendData({
url:"YOUR_URL",
asyne:true,
type:"POST", // or GET
data:{
username:"ali",
password:"mypass" // Your Data
},
success:function(Result){
console.log(Result)
},
error:function(e){
console.log("We Have Some Error")
}
});
Or
download jbezz and add to your page.
download link : github.com
use :
$$.api({
url:"YOUR_URL",
asyne:true,
type:"POST", // or GET
data:{
username:"ali",
password:"mypass" // Your Data
},
success:function(Result){
console.log(Result)
},
error:function(e){
console.log("We Have Some Error")
}
});