如何在部署于GCP的Angular+SpringBoot PayPal Docker应用中开启CORS

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

这个报错的根源是PayPal的API服务端没有返回允许你域名访问的CORS头，CORS头是目标资源服务端控制的，你修改自己的Docker配置、Angular本地代理、前端配置都无法修改PayPal接口的响应头，所以之前的尝试全部无效。

方案1：通过SpringBoot后端做请求转发（推荐） #

这是最稳妥的方案，无需额外引入其他组件，适配你现有的技术栈：

1. 前端修改请求地址：不要直接调用https://pilot-payflowpro.paypal.com/，改为调用你自己SpringBoot服务的接口，比如/api/paypal/xxx
2. SpringBoot侧配置全局CORS允许你的前端域名访问，示例配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 替换为你的前端实际域名，生产环境不要写*
                .allowedOrigins("http://myserverip")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

3. SpringBoot新增转发逻辑，把/api/paypal开头的请求原封不动转发到PayPal的目标地址，拿到响应后返回给前端即可，你可以用RestTemplate或者WebClient实现转发逻辑。

方案2：新增Nginx反向代理层 #

如果不想修改SpringBoot代码，可以在现有部署架构上新增Nginx服务，用Docker Compose统一编排：

1. 新建Nginx配置文件nginx.conf，示例配置：

server {
    listen 80;
    # 前端静态资源托管（如果你的Angular包是单独部署的话）
    root /usr/share/nginx/html;
    index index.html;

    # 允许前端跨域配置
    add_header Access-Control-Allow-Origin "http://myserverip";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "*";

    # 处理预检请求
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 转发PayPal请求
    location /api/paypal/ {
        proxy_pass https://pilot-payflowpro.paypal.com/;
        proxy_set_header Host pilot-payflowpro.paypal.com;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 转发SpringBoot的其他业务请求
    location /api/ {
        proxy_pass http://你的SpringBoot容器名:8080/;
    }
}

2. 修改docker-compose.yml新增Nginx服务配置，把Nginx的80端口映射到宿主机的80端口即可，原来的SpringBoot服务不用再暴露端口到宿主机。

方案3：使用PayPal官方前端集成SDK #

PayPal官方提供了适配前端的JS SDK，已经处理了跨域适配问题，不要自己手动构造POST请求调用PayPal底层接口，改用官方前端SDK走标准支付流程即可规避CORS问题。

Angular自带的代理配置仅在本地开发ng serve阶段生效，生产环境打包部署后代理规则不会生效，因此生产环境必须配置后端代理或者Nginx代理才能解决跨域问题。

内容的提问来源于stack exchange，提问作者user10192769