Cross-Origin Request Blocked error while integrating Paypal - ajax

While integrating Paypal I am getting below error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-2HF34205DN464620R. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-2HF34205DN464620R. (Reason: CORS request did not succeed).
Get Request:
function notEmpty() {
$.ajax({
url: 'https://companionstest.azurewebsites.net/Payment/PaymentWithPayPal',
headers: {
'Content-Type': 'text/html',
// 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Origins': '*',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Max-Age': '3600',
'Access-Control-Allow-Methods': 'GET',
'async': 'true',
'crossDomain': 'true',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
'Accept': 'text/html'
},
type: "GET", /* or type:"GET" or type:"PUT" */
async:"false",
// dataType: "text/html",
success: function (data) {
window.location.href = data.redirecturl;
},
error: function (httpRequest, textStatus, errorThrown) { // detailed error messsage
alert("Error: " + textStatus + " " + errorThrown + " " + httpRequest);
}
});
}

Related

How to submit Salesforce's Web to Lead Forms with AJAX instead of the default submission?

I am trying to submit my webtolead form, somethinf that is so simple and basic jQuery, But I am getting CORS origin error :
<script>
// https://www.domainName.my.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8
function postFormAjax(formData) {
$.ajax({
method: "POST",
type: "POST",
url: "https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
headers: {
'Access-Control-Allow-Origin': '*'
},
data: formData,
processData: false,
contentType: false,
crossOrigin: true,
crossDomain: true,
error: function (jqXHR, textStatus, errorMessage) {
if (textStatus == "error") {
console.log(jqXHR);
console.log(textStatus);
console.log(errorMessage);
}
},
success: function (data, textStatus, xhr) {
console.log(data);
}
});
}
postFormAjax({ first_name: "test", email: "test#gmail.com" })
</script>
This is the error :
Access to XMLHttpRequest at
'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8'
from origin 'null' 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.
I allowed localhost on my Salesforce SETUP :
Also I feel like there is something important about this field :
I don't find many clear guides on how to submit webtolead forms via XMLHTTPSREQUEST !!
Any help or indication here would be much appreciated.

502 bad gateway error for cross-origin request

I am using the serverless framework to deploy my lambda to AWS and have been able to successfully run POST requests via Postman to the API Gateway associated with my lambda function, but when I try run a POST request from a form submission (AJAX request) on a local server I am receiving the 502 error message,
Access to XMLHttpRequest at 'https://*id*.execute-api.us-east-1.amazonaws.com/prod/message' from origin 'http://localhost:2368' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
which I didn't expect since I have the cors property in my serverless.yml set to true, which sets CORS configurations for the HTTP endpoint. Here is the function yaml setup:
functions:
email:
handler: handler.sendEmail
events:
- http:
path: message
method: post
cors: true
Here is the jQuery AJAX request:
$.ajax({
type: 'POST',
url: 'https://*id*.execute-api.us-east-1.amazonaws.com/prod/message',
crossDomain: true,
data: JSON.stringify(formData),
contentType: 'application/json',
dataType: 'json',
success: function(data) {
console.log(data)
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(ajaxOptions);
console.log(thrownError);
}
});
Is there something that I need to adjust with the API Gateway configuration or within my Lambda application?
Here is my response function:
const generateResponse = (body, statusCode) => {
console.log("generateResponse")
console.log(body)
return Promise.resolve({
headers: {
"access-control-allow-methods": "POST",
"access-control-allow-origin": "*",
"content-type": "application/json",
},
statusCode: statusCode,
body: `{\"result\": ${body.message}}`
});
};
Also provided is the ajax request:
$.ajax({
type: 'POST',
url: 'https://*my-lambda-id*.execute-api.us-east-1.amazonaws.com/prod/message',
crossDomain: true,
data: JSON.stringify(formData),
contentType: 'application/json',
dataType: 'json',
success: function(data) {
console.log(data)
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(ajaxOptions);
console.log(thrownError);
}
})
And the resulting OPTION and POST Request and Response Headers triggered by the AJAX:
OPTIONS:
Request URL: https://*my-lambda-id*.execute-api.us-east-1.amazonaws.com/prod/message
Request Method: OPTIONS
Status Code: 200
Response Headers
access-control-allow-credentials: false
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent
access-control-allow-methods: OPTIONS,POST
access-control-allow-origin: http://localhost:2368
content-length: 1
content-type: application/json
date: Tue, 08 Oct 2019 11:11:36 GMT
status: 200
via: 1.1 *id*.cloudfront.net (CloudFront)
x-amz-apigw-id: *id*
x-amz-cf-id: *id*
x-amz-cf-pop: *id*
x-amzn-requestid: *id*
x-cache: Miss from cloudfront
Request Headers
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:2368
Referer: http://localhost:2368/
Sec-Fetch-Mode: no-cors
POST
Request URL: https://*my-lambda-id*.execute-api.us-east-1.amazonaws.com/prod/message
Request Method: POST
Status Code: 502
Request Headers
Accept: application/json, text/javascript, */*; q=0.01
Content-Type: application/json
Origin: http://localhost:2368
Referer: http://localhost:2368/
Sec-Fetch-Mode: cors
Wherever you return a response from your Lambda function you need to include the specific header CORS requests. The cors: true option you add to serverless.yml only helps make sure that the OPTIONS pre-flight requests work. Don't forget that this includes non-success responses as well.
For example:
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Headers': 'Authorization'
}
}

Bigcommerce API status code 401

I got the error
Failed to load https://store-cmr1f5oakh.mybigcommerce.com/api/v2/products: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://tim-yma5.mybigcommerce.com' is therefore not allowed access. The response had HTTP status code 401.
I used ajax to call the api
$.ajax({
url: "https://url/api/v2/products",
beforeSend: function(xhr){
xhr.setRequestHeader("Authorization", "Basic " + btoa("username" + ":" + "token"));
},
type: 'GET',
dataType: 'json',
success: function(data){
console.log("api_success");
}
});
How can i avoid No 'Access-Control-Allow-Origin' ?
try to modify the data type to jsonp
$.ajax({
url: "https://url/api/v2/products",
beforeSend: function(xhr){
xhr.setRequestHeader("Authorization", "Basic " + btoa("username" + ":" + "token"));
},
type: 'GET',
dataType: 'jsonp',
success: function(data){
console.log("api_success");
}
});
you can use also in your HTML :
<head>...<meta http-equiv="Access-Control-Allow-Origin" content="*">...</head>
but you'd better configure your webserver or webapp to send this header

Parse.Cloud.httpRequest response gzip inflation / decompression

Is there something different in how Parse.Cloud.httpRequest is handling compression ?
On parse.com, I never had an issue with receiving a XML file, but using parse server on a different host (back4app), my httpResponse.text is a load of:
�E��ڇ�*q�������y���v^�����
Parse.Cloud.job("fetchData", function(request, status) {
Parse.Cloud.httpRequest({
method: 'GET',
url: 'http://example.com/test.xml',
headers: {
'Accept': 'application/xml',
'Accept-Encoding': 'gzip, deflate'
},
success: function (httpResponse) {
console.log("SUCCESS RECD FILE: " + httpResponse.text);
},
error: function (httpResponse) {
console.log('An error has occured with the http request.: ' + httpResponse);
}
});
}
Thanks for the great support at back4app, here is the solution
Basically, the option gzip:true is not documented anywhere but is needed.
I am not sure if the headers are needed, but I left them in anyway.
Parse.Cloud.httpRequest({
url: 'http://example.com/feed.xml',
headers: {
'Content-Type': 'application/xml',
'Accept-Encoding': 'gzip, deflate'
},
gzip:true,
success: function (httpResponse) {
...
},
error: function (httpResponse) {
...
}
}

jQuery Ajax POST Failing

I can't get my AJAX request to complete successfully. It's for the bearere token on Twitter's API. I have done successfully in a HTTP request client as shown below:
But I can't replicate this in code:
$.ajax({
type: 'POST',
url: 'https://api.twitter.com/oauth2/token',
headers: {
'Authorization':'Basic ' + base64EncodedBearerTokenCredentials,
},
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
data: {
'grant_type': 'client_credentials'
},
error: function(xhr, status, error) {
},
success: function(response){
},
});
I'm getting a 405, but because I have the Authorization header in I can't see the response in Firebug.
What is it?
Thanks.

Resources