Enable CORS in an Angular Paypal Docker application-CodePudding

My application with angular front end and springboot backend is trying to make a REST POST call to one of the PayPal APIs from Angular front end. The application is deployed as a Docker container in GCP VM instance. If I dont open the broser with web security disabled I get the ERROR

"Access to XMLHttpRequest at 'https://pilot-payflowpro.paypal.com/' from origin 'http://myserverip' 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 see lot of answers for this question in SO and others with adding headers in httpd.conf / .htaccess files. But I dont have both these files. I tried adding headers to Dockerfile and also adding commands to docker-compose.yaml file. Also tried adding the end URL in angular proxy configuration file. None of it worked.

Is there any way to enable CORS either in a docker config file or in the server itself. docker-compose.yml

  image: docker.image.link
  privileged: true
  ports:
    - '80:8080'
  restart: 'no'
  volumes:
    - '/var/sftp/upload:/usr/share/invoice/invoiceFile'

 environment:
    - SPRING_PROFILES_ACTIVE=docker
    - DB_CONN_STRING=jdbc:postgresql:url
    - DB_USER=postgres
    - DB_PASS=postgres
    - HOST_NAME=hostname
    - SMTP_HOST=smtphost
    - SMTP_PORT=25
    - SMTP_AUTH_TRUE_FALSE=false

Dockerfile

FROM openjdk:8-jdk-alpine

ARG JAR_FILE
ADD target/${JAR_FILE} /usr/share/application.jar
ADD template/ /usr/share/template

VOLUME /tmp

EXPOSE 8080

ENTRYPOINT ["java", "-jar", "/usr/share/application.jar"]

CodePudding user response：

The CORS error is an error emitted by the browser when the request response, from the backend, hasn't the properly headers to tell to the browser that this client can perform/view the request.

So, in your case the backend is the PayPal (https://pilot-payflowpro.paypal.com/ -> paypal.com) not your backend, so even if you add any headers to your backend or frontend, the problem will persist because the only header that is important when you perform the request to the https://pilot-payflowpro.paypal.com/ is the header from the response of this request.

To solve this problem the https://pilot-payflowpro.paypal.com/ needs to send the correct header response allowing you to perform this request, and I think it's not possible because security reasons.

Some endpoints can't be use from a frontend application, only from a backend, and I think it's your case.

To avoid the CORS problem you can create an endpoint in your backend that call the https://pilot-payflowpro.paypal.com/. So, in your frontend you call your backend endpoint and the backend call the PayPal API.

CodePudding user response：

calling the REST call is one solution. Another solution would be to mask the endpoint URL in the proxy configuration in Angular.

"/paypal" : {
        "target" : "https://pilot-payflowpro.paypal.com/",
        "secure" : true,
        "changeOrigin": true,
        "pathRewrite":{
            "^/paypal":""
        }
    }

And calling /paypal where we have to do the REST call.