解决 vue-cropper 图片加载跨域问题（Nginx + PHPStudy）

用 vue-cropper 加载图片时，浏览器报跨域错误：

Access to image at 'http://backend.test/uploads/xxx.png' from origin 'http://frontend:8084' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present.

其他页面图片正常，唯独 vue-cropper 报错。原因是 vue-cropper 用 Canvas 加载图片，触发了严格的跨域检查，服务器未返回 Access-Control-Allow-Origin 头。

• 前端：Vue3，vue-cropper，运行在 http://frontend:8084。
• 后端：PHPStudy（Nginx + PHP），图片在 backend.test/uploads/。

解决方法:

在 Nginx 配置中为图片添加 CORS 头。修改配置如下：

server {
    listen 80;
    server_name backend.test;
    root "/path/to/public";

    # 处理图片，添加 CORS
    location ~* .(png|jpg|jpeg|gif|svg)$ {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type";
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin "*";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers "Content-Type";
            add_header Content-Length 0;
            return 204;
        }
        try_files $uri $uri/ /index.php?$query_string;
    }

    location / {
        index index.php index.html;
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ .php(.*)$ {
        fastcgi_pass 127.0.0.1:9004;
        fastcgi_index index.php;
        fastcgi_split_path_info ^((?U).+.php)(/?.+)$;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
        include fastcgi_params;
    }
}

1. 备份 Nginx 配置文件。
2. 添加上述 location ~* .(png|jpg|jpeg|gif|svg)$ 块。
3. 检查语法：nginx -t。
4. 重启 Nginx：PHPStudy 面板重启或 nginx -s reload。
5. 清浏览器缓存，测试 vue-cropper 图片加载。

注意：

• Canvas 要求：vue-cropper 的 Canvas 需要图片来源返回 CORS 头，Access-Control-Allow-Origin: * 满足要求。

• 预检请求：OPTIONS 处理确保浏览器预检通过。

• 静态图片：Nginx 直接提供图片，CORS 头生效。

• 安全：* 适合测试，生产环境改用具体域名（如 http://frontend:8084）。