Angular5上传文件至Laravel遇跨域问题：缺少Access-Control-Allow-Origin头

嘿，我来帮你搞定这个文件上传时的跨域错误！你说普通CRUD都没问题，唯独文件上传触发了No 'Access-Control-Allow-Origin' header提示，大概率是你的CORS中间件配置没覆盖到文件上传请求的特殊场景，或者中间件没正确生效。下面是一步步的排查和解决方法：

1. 完善你的CORS中间件代码 #

你提供的中间件代码看起来没写完，正确的CORS中间件需要处理OPTIONS预检请求（文件上传这类带特殊内容类型的请求会触发浏览器预检），同时设置全必要的响应头。替换成下面的完整代码：

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    public function handle($request, Closure $next)
    {
        // 设置允许的源、方法和请求头
        $response = $next($request);
        
        $response->header('Access-Control-Allow-Origin', '*')
                 ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                 ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With')
                 ->header('Access-Control-Allow-Credentials', 'true');

        // 直接响应OPTIONS预检请求，避免后续处理
        if ($request->isMethod('OPTIONS')) {
            return response()->json(['status' => 'ok'], 200);
        }

        return $response;
    }
}

如果你的应用需要限制特定域名，可以把*换成你的Angular前端域名（比如http://localhost:4200）。

2. 确保中间件正确注册 #

打开app/Http/Kernel.php，把CORS中间件添加到全局中间件数组里（这样所有请求都会生效）：

protected $middleware = [
    // 其他已有的中间件...
    \App\Http\Middleware\Cors::class,
];

或者如果只想给API路由生效，可以加到$middlewareGroups的api组里：

protected $middlewareGroups = [
    'web' => [
        // ...
    ],
    'api' => [
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \App\Http\Middleware\Cors::class, // 加在这里
    ],
];

3. 检查Angular端的文件上传请求配置 #

文件上传必须用FormData，而且不要手动设置Content-Type——浏览器会自动为multipart/form-data请求添加正确的边界信息，手动设置反而会导致错误。示例代码：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class UploadService {
    constructor(private http: HttpClient) {}

    uploadFile(file: File): Observable<any> {
        const formData = new FormData();
        formData.append('file', file, file.name); // 第三个参数可选，指定文件名

        // 直接发送FormData，不要设置Content-Type头
        return this.http.post('/api/upload', formData);
    }
}

4. 验证Laravel路由和缓存 #

• 确保文件上传的路由在routes/api.php里（API路由默认不受CSRF保护，而web路由需要CSRF令牌，跨域场景下很难处理）；
• 运行以下命令清除Laravel缓存，确保中间件和路由的修改生效：

php artisan config:clear
php artisan route:clear

最后排查点 #

如果还是不行，打开浏览器的开发者工具，查看网络请求里的OPTIONS请求：

• 看响应头里有没有Access-Control-Allow-Origin；
• 检查请求的方法和头是否在中间件允许的范围内。

这样一步步下来，应该就能解决文件上传的跨域问题了！

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