Ad

CORS Error With PayPal Rest API, Firebase Functions And Angular 6

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 ?

Ad

Answer

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)

Ad
source: stackoverflow.com
Ad