在 Angular Paypal Docker 应用程序中启用 CORS答案

【问题标题】：Enable CORS in an Angular Paypal Docker application在 Angular Paypal Docker 应用程序中启用 CORS
【发布时间】：2021-12-08 11:13:12
【问题描述】：

我的带有 Angular 前端和 springboot 后端的应用程序正在尝试从 Angular 前端对其中一个 PayPal API 进行 REST POST 调用。该应用程序部署为 GCP VM 实例中的 Docker 容器。如果我不打开禁用网络安全的broser，我会收到错误

"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."

我在 SO 和其他通过在 httpd.conf / .htaccess 文件中添加标题的问题中看到了很多答案。但我没有这两个文件。我尝试将标头添加到 Dockerfile 并将命令添加到 docker-compose.yaml 文件。还尝试在角度代理配置文件中添加结束 URL。一个都没用。

有没有办法在 docker 配置文件或服务器本身中启用 CORS。 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"]

【问题讨论】：

标签： angularjs docker-compose paypal dockerfile payflowpro

【解决方案1】：

CORS 错误是当来自后端的请求响应没有正确的标头告诉浏览器此客户端可以执行/查看请求时，浏览器发出的错误。

因此，在您的情况下，后端是 PayPal (https://pilot-payflowpro.paypal.com/ -> paypal.com) 而不是您的后端，因此即使您向后端或前端添加任何标头，问题仍然存在，因为唯一的标头是当您向https://pilot-payflowpro.paypal.com/ 执行请求时，重要的是来自此请求的响应的标头。

要解决这个问题，https://pilot-payflowpro.paypal.com/ 需要发送正确的标头响应以允许您执行此请求，我认为出于安全原因，这是不可能的。

有些端点不能从前端应用程序使用，只能从后端使用，我认为这是你的情况。

为避免 CORS 问题，您可以在后端创建一个调用 https://pilot-payflowpro.paypal.com/ 的端点。因此，在前端调用后端端点，后端调用 PayPal API。

【讨论】：

【解决方案2】：

调用 REST 调用是一种解决方案。另一种解决方案是在 Angular 的代理配置中屏蔽端点 URL。

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

然后在我们必须调用 REST 的地方调用 /paypal。

【讨论】：