I'm trying to learn paypal payment. I have done a simple AngularJS application that use Paypal-Express-Checkout. As it says on the documentation, first of all I have to do the call SetExpressCheckout.
$http.post("https://api-3t.sandbox.paypal.com/nvp", request)
.success(function(data){
console.log(data);
}).error(function(error){
console.log(error);
});
In the object request there are all payment details.
But when I run the script, the result of http call is: XMLHttpRequest cannot load https://api-3t.sandbox.paypal.com/nvp. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
I tried to search this error, but I find nothing. How can I solve?
UPDATE: If the request comes from a form does not give me any error but if it come from http.post function it give me an error
You have to perform your Paypal transaction on the back end, and the message you're seeing is Paypal enforcing that notion. See this article on CORS for more info.
Your angular http call should be sending the basic transaction info to your server, which will then construct an API request for Paypal, handle the response from Paypal, and then convey that information for consumption by the client side.
[edited to add more info about CORS]
Related
It took me awhile to realized it's not a CORS issue. I have Cognito authorizer setup with my API Gateway. I test with the my IDtoken using Postman, when the authorizer on my header is incorrect or the token is expired, postman response would tell me
{
"message": "Unauthorized"
}
{
"message": "Token expired"
}
The problem is, in my dev/localhost; I would get the results correctly if the token is correct, but when the token is bad or expired, I get a CORs error. How do I set this up so I can handle the results correctly?
Access to XMLHttpRequest at 'https://xcz3vfg4n7.execute-api.us-west-2.amazonaws.com/prod' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js:210 POST https://xcz3vfg4n7.execute-api.us-west-2.amazonaws.com/prod net::ERR_FAILED 403
We ran into this same issue and since it was a painful to resolve, thought I would type up the solution.
Specifically we were receiving the CORs error via Axios in our React app, but not getting the error through cURL or Thunderclient (Postman-like extension for VS Code).
The resolution was actually missing headers on the "response" object from API Gateway.
Since cURL and Thunderclient/Postman don't care about CORs (because they server-based, not browser-based), those tools don't look for the 'Access-Control-Allow-Origin' header in the response.
We got back our preflight Options call 200 just fine, and then realized that the POST call was returning the 401 without an 'Access-Control-Allow-Origin' header.
Since the Authorizer is on the Method Request, it never goes past the Lambda proxy in the API Gateway and thus doesn't return full response headers.
So... the solution was actually really simple.
Go into "Gateway Responses"
Choose the "Unauthorized" option
Add the response headers (see screenshot)
IMPORTANT: Don't forget to "Redeploy" your API or the changes won't take effect
Example:
I am trying to access a Google Apps Script WebAPI from my website using javascript to pass some value and create an excel file and download it through this API.
I tried 2 following way:
Using POST request with $.post.
My values are many. So, at first, I use a POST request with a body is JSON of list values. Browser rejects API response, because of CORS error.
I researched about CORS to understand it. At some topics, I found a solution is the following second way.
Access to XMLHttpRequest at 'https://script.google.com/macros/s/xxxxxxx' from origin 'https://example.com' 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.
Using GET request with $.getJSON.
I pass JSON of list values to URL parameter and make GET request. It worked fine.
var url = 'https://script.google.com/macros/s/' + api_id + '/exec?' + request_parameter_string;
$.post(url, payload, function(data, textStatus) {
// Do something
}, 'json');
$.getJSON(url, function(json_result) {
// Do something
})
.fail(function() {
// Do something
});
What I do not understand is why? Why it works with getJSON but not work with post?
I think CORS work with both of GET and POST requests. And I checked the response header with Postman. The headers are the same Access-Control-Allow-Origin →*.
I think have something is different inside getJSON and post functions.
*UPDATE: Update POST CORS error message.
GET requests are not bound by CORS we can host images and static files in CDN which is different from the origin and would help in improving the performance by caching and making parallel requests.
Similarly GET is used for serving ads, trackers and analytics from third party domains as well.
More information about Same Origin Policy and GET is at https://security.stackexchange.com/a/16221/9517
How the browsers identify Other HTTP Verbs are allowed for the cross origin request is elaborated # https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
I am working on twitter login using Jquery and Plain Java Script.
I have completed most of work, I am trying to get request_token from https://api.twitter.com/oauth/request_token URL. Request goes from my page as well but everytime it send me error of:
jquery.js:9536 OPTIONS https://api.twitter.com/oauth/request_token 400 ()send # jquery.js:9536ajax # jquery.js:9143clickToCalculate # twt.html:71onclick # twt.html:423
twt.html:1
XMLHttpRequest cannot load
https://api.twitter.com/oauth/request_token. Response for preflight has invalid HTTP status code 400
twt.html:82
Object {readyState: 0, status: 0, statusText: "error"}
My request URL page is http://kurbhatt.github.io/twt.html, you can check it's page source as well from https://github.com/kurbhatt/kurbhatt.github.io/blob/master/twt.html source page.
I have put valid and enough data from twitter apps to this page.
Can anyone tell me why I am facing this issue ?
Since last 3-4 days I am working on this issue, still not get solution for the issue.
And sometimes it gave me another type of error:
XMLHttpRequest cannot load https://api.twitter.com/oauth/request_token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://kurbhatt.github.io' is therefore not allowed access. The response had HTTP status code 400.
You are making a "GET" request to the api.
twitter api for request_token accepts only POST.
Fix your ajax request to make a POST request. The option is method not type
$.ajax({
method: "POST",
...
well, i would like to reply your comment in the comment, but that would be too tiring.
what you need to do to get the request token is do an HTTP POST to api.twitter.com/oauth/request_token with addtional headers, that is Authorization header, as stated in this twitter docs.
you can easily do that by creating a cURL POST request from your web server to the url above, let's say you have that cURL page in yourdomain.com/twittercurl, therefore you can make your jQuery call to that page instead of the twitter request token URL.
as I don't know which server side programming language you are using, you need to find the appropriate cURL call.
but, aside from that, here are some links to read, maybe you can find usefull informations from it:
adding request header to jQuery ajax call
cross domain ajax call
and don't forget the twitter docs mentioned above
lastly, you can also read this PHP library for the server side cURL request
I have a problem with ajax request to Steam.
I want to get price from steam market.
function jPrice(httpToJson) {
$.getJSON(httpToJson, function(data) {
return data.median_price;
});
}
When I call function
jPrice('http://steamcommunity.com/market/priceoverview/?country=US¤cy=1&appid=730&market_hash_name=StatTrak%E2%84%A2%20P250%20%7C%20Steel%20Disruption%20%28Factory%20New%29');
I get an error:
XMLHttpRequest cannot load http://steamcommunity.com/market/priceoverview/?country=US¤cy=1&appid=730&market_hash_name=StatTrak%E2%84%A2%20P250%20%7C%20Steel%20Disruption%20%28Factory%20New%29. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://lоcalhоst:63342' is therefore not allowed access.
I try:
Set php header Access-Control-Allow-Origin to *
JSONP
RESULT -> The same thing (error)!
Maybe someone knows a solution to this problem?
You won't be able to get the results in your browser via ajax request made directly against steamcommunity.com, neither by setting the header Access-Control-Allow-Origin to *, nor by sending a JSONP request.
For this to work, steamcommunity.com should either add CORS headers in the response (the error message you're seing means that they are not there), or format the output to be JSON-P. They didn't do either.
This is a browser restriction, do not allow the content from a different origin to be loaded via ajax. What you need to do is introduce a middle-ware, so have your back-end server to make a request against steamcommunity.com and return the same response, and make the ajax call against you're server. This will work, your back-end is sending the request, and as it is not a browser request, the response will land, than your ajax call will be able to get the response as well since it is issued against the same domain
I have a form in my angular app in which user are required to provide a valid url.
Therefore when submitting the form, I'd like to test if the URL is valid by making a get request to the url provided and check if the server sends 200.
When a click the submit button, the following code is run:
$http.get(scope.target_url).success(function(){
// some code
}).error(function(error){
console.log(error);
});
However, I never get a successfull answer:
- if I provide a url like: 'http://www.somesite.com', I get:
XMLHttpRequest cannot load 'http://www.somesite.com'. Received an invalid response. Origin 'mydomain' is therefore not allowed access.
if I provide a url like: 'http://somesite.com', I get:
XMLHttpRequest cannot load http://somesite.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'mydomain' is therefore not allowed access.
Where does the problem come from?
That is normal security constraints. Read about CORS here:
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing