AnsweredAssumed Answered

How to Resolve the CORS Error when Calling POST (AJAX - BOOMI)?

Question asked by jegan.s@tekizma.com on Oct 7, 2018

I am trying to call the POST from AJAX which is a Cross platform ( Atom Deployed in Dell Boomi cloud ) so I am getting the following Error

Failed to load https://connect.boomi.com/ws/rest/filereturn;boomi_auth=dHJhaW5pbmdqZWdhbnMtRTFaR1pULjQxRVpKTzowYzQ0MWUwYy1kYjMyLTRjMTktYjRlYi0wYTQyZjc5NDQyYzc=: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://52.32.52.164' is therefore not allowed access.

Failed to load resource: the server responded with a status of 403 (Forbidden)

 

My code Javascript file Handles two AJAX requests one for forms and other for file upload

 

My Code is:  (Javascript)

---------------------------------------------------------------------------------------------------------------------------------------------------------------

var url ="https://connect.boomi.com/ws/rest/filereturn;boomi_auth=dHJhaW5pbmdqZWdhbnMtRTFaR1pULjQxRVpKTzowYzQ0MWUwYy1kYjMyLTRjMTktYjRlYi0wYTQyZjc5NDQyYzc=";

jQuery(document).ready(function(){

jQuery('#upload').on('submit', function(event){

var firstName = document.forms["upload"]["firstName"].value;
var lastName = document.forms["upload"]["lastName"].value;
var birthDate = document.forms["upload"]["birthDate"].value;
var employeeID = document.forms["upload"]["employeeID"].value;
var companyEIN = document.forms["upload"]["companyEIN"].value;

var obj = {
firstName : firstName,
lastName : lastName,
birthDate : birthDate,
employeeID : employeeID,
companyEIN : companyEIN
}

var fileObj = {
employeeID : employeeID,
dataURI : "",
}

POST(obj);

var files = document.querySelector('#file').files;

// check for supporting documents
if (files.length > 0){
for(var i = 0; i < files.length; i++){
handleUpload(fileObj, files[i]);
}
}

event.preventDefault();
});
});

// handle the ajax post request
function POST(obj){
var answer = document.querySelector('#answer');

//send post
jQuery.ajax({
type: 'POST',
url: url,
headers : {
"Content-Type" : "application/json; charset=utf-8",
"Accept" : "application/json",
"Access-Control-Allow-Origin":"*",
"Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept"
},
data: obj,
dataType: "json",


success: function (response) {
answer.innerHTML = "response data : " + response["data"] + "\n";
},
error: function (request, status, error) {
;
}
});
}

// handle the ajax post request
function filePOST(obj){
var answer = document.querySelector('#answer');
//send post
jQuery.ajax({
type: 'POST',
contentType: "application/json",
url: url,
data: JSON.stringify(obj),

success: function (response) {
answer.innerHTML = "response data : " + response["data"].split(',')[0] + " , " + response["data"].split(',')[1] + '... "}' ;
}
});
}

function readFile(file) {
var reader = new FileReader();

return new Promise((resolve, reject) => {
reader. = () => {
reader.abort();
reject("error encoding file");
};

reader. () => {
var arrayBuffer = reader.result;

// Convert b64 to file and download
var blob = b64toBlob(arrayBuffer, 512);
document.querySelector("#checkFile").href = URL.createObjectURL(blob);

resolve(arrayBuffer);
};
reader.readAsDataURL(file);
});
}

async function handleUpload(obj, file) {
try {
obj.dataURI = await readFile(file);
filePOST(obj);
} catch (e) {
console.warn(e.message);
}
}

// convert b64 to blob given dataURI
function b64toBlob(dataURI, sliceSize) {

var byteString = atob(dataURI.split(',')[1]); // convert base64 to raw binary data held in a string
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // separate out the mime component

var byteArrays = [];

for (var offset = 0; offset < byteString.length; offset += sliceSize) {
var slice = byteString.slice(offset, offset + sliceSize);

var byteArray = new Uint8Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteArray[i] = slice.charCodeAt(i);
}
byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, {type: mimeString});
return blob;
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------

My Boomi Configuration

 

 

 

 

 

My CORS Configuration

 

 

PORT: 

8080

8000

3011

3000

3010

Method

DELETE
POST
OPTIONS
GET
PUT

Allowed Request Header

Authorization

Accept

Access-Control-Request-Headers

Access-Control-Request-Method

Content-type

Exposed Response Header

Access-Control-Allow-Headers

Access-Control-Allow-Method

Access-Control-Allow-Origin

 

This is an API

 

So, please Help me to Solve this Issue!!!!!

Outcomes