Laravel5.8+Angular8调用POST API返回302时触发CORS跨域错误

我来帮你拆解问题根源，再给出针对性的解决方案：

问题本质 #

你看到的CORS错误不是来自Laravel的响应，而是来自302跳转后的外部目标站点。当Angular前端发送POST请求到Laravel接口，Laravel返回302响应并附带Location头时，浏览器会自动发起一个GET请求到这个Location指向的外部网站（比如https://www.example.com）。而这个外部网站没有配置Access-Control-Allow-Origin头，导致浏览器的同源策略拦截了这个后续请求，从而抛出你看到的错误。

你的Laravel CORS中间件配置是正确的，但它只负责给Laravel自身的响应添加CORS头，无法控制外部站点的响应头。

可行解决方案 #

方案1：让前端处理跳转（推荐） #

最稳妥的方式是放弃Laravel直接返回302的逻辑，改为返回包含跳转URL的JSON响应，由Angular前端主动执行页面跳转。因为浏览器的页面导航（比如window.location.href）不受同源策略限制，不会触发CORS检查。

修改你的Laravel控制器代码，调整支付响应的处理逻辑：

class InvoiceController extends Controller{
    public $successStatus = 200;
    public function addInvoice(Request $request){
        $validator = Validator::make($request->all(), [
            'id'=>'required',
            'title'=>'required',
            'price'=>'required',
            'price_state'=>'required',
        ]);
        if ($validator->fails()) {
            return response()->json(['error'=>$validator->errors()->first()], 400);
        }
        $input['id']= $request['id'];
        $input['title']= $request['title'];
        $input['price']= (int)$request['price'];
        $input['price_state']= $request['price_state'];
        $invoice = (new Invoice)->amount( $input['price']);
        $invoice->detail(['course' =>$input['title']]);
        
        // 获取支付SDK生成的响应（不直接返回）
        $paymentResponse = Payment::callbackUrl('http://localhost:4200/preInvoice/'.$input['id'].'/'.$input['title'])
            ->purchase( $invoice, function($driver, $transactionId) {
                // 存储$transactionId到数据库
            })->pay();
        
        // 提取跳转URL
        $redirectUrl = $paymentResponse->headers->get('Location');
        
        // 返回JSON给前端，让前端执行跳转
        return response()->json([
            'redirect_url' => $redirectUrl
        ], $this->successStatus);
    }
}

然后在Angular的请求处理代码中，收到响应后执行跳转：

// 假设你用HttpClient发送请求
this.http.post('/api/add-invoice', formData).subscribe({
  next: (res: any) => {
    if (res.redirect_url) {
      // 前端主动跳转，完全避开CORS限制
      window.location.href = res.redirect_url;
    }
  },
  error: (err) => {
    // 处理错误逻辑
    console.error(err);
  }
});

方案2：让外部站点配置CORS（几乎不可行） #

如果一定要保留Laravel返回302的逻辑，那需要外部支付站点配置Access-Control-Allow-Origin头，允许你的Angular域名（http://localhost:4200）访问。但通常你无法控制外部站点的配置，所以这个方案基本不具备可操作性。

额外验证步骤 #

确认你的CORS中间件已经正确注册到Laravel内核中，比如在app/Http/Kernel.php的$middlewareGroups['api']数组中添加该中间件，确保所有API请求都经过CORS处理：

protected $middlewareGroups = [
    'api' => [
        \App\Http\Middleware\Cors::class, // 确保这里已添加
        'throttle:60,1',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];

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