CORS error with PayPal Rest API, firebase functions and Angular 6

1
votes

I would like to set up a payment for my marketplace with Paypal. I build my app with Angular 6, and the backend with firebase, using firebase functions (google cloud functions).

I used this Paypal firebase function example to build my firebase backend.

In my frontEnd app I got this function to trigger the payment method:

processPayment() {
    this.http.post('https://us-central1-project.cloudfunctions.net/pay', {price: this.amount })
      .subscribe(res => console.log(res));
  }

So this should redirect me to the paypal page for the payment of the amount variable. Here's where the CORS error happend, when I triggered the function I end up with this error in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-central1-project.cloudfunctions.net/pay (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-central1-project.cloudfunctions.net/pay. (Reason: CORS request did not succeed).

Correct me if I'm wrong, but this error comes from the fact that I'm trying to access this page with my IP through localhost:4200. (Notice that the page is working if i make the request to https://us-central1-cop-room-host.cloudfunctions.net/pay manually).

So I tried to modify my Cloud function code, I added:

const cors = require('cors')({
  origin: true,
});

However, I end up with this error in the console:

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-54G25913XT5841335. (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-54G25913XT5841335. (Reason: CORS request did not succeed).

Furthermore, origin:true is unsafe...

How can I configure this payment method in order to make it work with angular 6 ?

2
angularfirebasepaypalcorsangular6

2 Answers

2
votes

To be clear, this is not an Angular error. It afflicts all web apps equally, and most of the fixes we’ll look at below are actually modifying the server or the browser.

You’ve run a foul of the Same Origin Policy – it says that every AJAX request must match the exact host, protocol, and port of your site. Things that might cause this:

Hitting a server from a locally-served file (a request from file:///YourApp/index.html to http://api.awesome.com) Hitting an external API (a request from http://yourapp.com to http://api.awesome.com). Hitting an internal API (a request from http://yourapp.com to http://api.yourapp.com). Hitting a different port on the same host (webapp is on http://localhost:3000, API is http://localhost:4000) Requesting over http from https or vice-versa (requesting https://yourapp.com from http://yourapp.com)

0
votes

CORS errors are complicated to handle in webApps, especially if you do not have access to the API code you're using. So I changed a bit the mecanism of the server, instead of getting a 302 redirection to the paypal page after I triggered the pay function

res.redirect(302, links.approval_url.href);

I send the link and I access the link directly trought the angular app:

function code (index.ts):

res.status(200).send(JSON.stringify(links['approval_url'].href));

Web App component code:

processPayment() {
   this.http.post('https://us-central1-cop-room-host.cloudfunctions.net/pay', {price: this.amount })
     .subscribe(res => {
       console.log(res);
       document.location.href = res;
     });
   }