Laravel API重定向至Angular网站遇CORS错误如何解决？

我有一个Laravel API，尝试将用户重定向回我的Angular网站但未成功。对应的Laravel代码片段如下：

public function payViaApplePay(Request $request)
{
    $paymentId = $request['payment_id'];
    $paymentData = $request['payment_data'];

    $results = $this->service->payViaApplePay($paymentId, $paymentData);

    $redirect_url = $this->service->getRedirectURL((array)$results);
    return redirect()->away($redirect_url);
}

浏览器中出现如下错误：

[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. Status code: 200

我尝试在重定向中添加Origin请求头，但没有任何效果。请问该如何解决这个问题？或者有没有更好的重定向方式？

这个问题的核心原因是：你通过AJAX/fetch这类前端HTTP请求调用Laravel API，而AJAX请求的重定向不会触发浏览器的页面跳转，反而会让前端请求自动跟随重定向去访问目标URL，这时候就触发了跨域资源共享（CORS）的限制。如果你的前端是通过file://协议打开的本地文件，Origin就会是null，这在CORS规则里默认是不被允许的。

推荐的解决方式是让前端来处理跳转，而不是在API接口里返回重定向响应：

1. 修改Laravel API返回目标URL #

把接口的返回改成JSON格式，直接返回需要跳转的URL：

public function payViaApplePay(Request $request)
{
    $paymentId = $request['payment_id'];
    $paymentData = $request['payment_data'];

    $results = $this->service->payViaApplePay($paymentId, $paymentData);
    $redirect_url = $this->service->getRedirectURL((array)$results);

    return response()->json(['redirect_url' => $redirect_url]);
}

2. 在Angular中处理跳转 #

前端收到API返回的URL后，直接通过浏览器原生方法或者Angular路由进行跳转：

// 假设你用HttpClient调用API
this.http.post('/api/pay-via-apple-pay', paymentData).subscribe({
  next: (response: any) => {
    // 方式1：用原生跳转（适合跳转到外部域名）
    window.location.href = response.redirect_url;
    // 方式2：用Angular路由（适合同域名内跳转）
    // this.router.navigateByUrl(response.redirect_url);
  },
  error: (err) => {
    // 处理错误
  }
});

备选方案：配置CORS（不推荐用于页面跳转场景） #

如果你坚持要在API中返回重定向，需要正确配置Laravel的CORS规则：

• 安装并配置barryvdh/laravel-cors包
• 在config/cors.php中，将allowed_origins添加null（仅本地开发时用，生产环境不要这么做），同时确保allowed_methods包含GET、POST等请求方法，supports_credentials设为true（如果需要携带Cookie）

不过这种方式本质上还是让AJAX请求跟随重定向，并非真正的页面跳转，所以优先推荐第一种前端处理跳转的方案。

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