Magento 2中XMLHttpRequest/AJAX文件上传Chrome正常Firefox失效

我之前也碰到过类似的跨浏览器AJAX文件上传问题，结合你的代码和Magento的特性，大概率是这几个点导致Firefox失效，给你一步步排查和解决的方向：

1. 补充AJAX请求头，兼容Magento的请求识别 #

Firefox对FormData请求的头信息处理比Chrome更严格，你可以添加标准的AJAX请求头，帮助Magento控制器正确识别请求类型：

var xhr = new XMLHttpRequest();
var url = "https://example.com/myurl/";
xhr.open("POST", url, true);
// 添加这行，标记为AJAX请求
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

注意不要手动设置Content-Type: multipart/form-data，XMLHttpRequest会自动为FormData生成带正确boundary的头信息，手动设置反而会导致请求解析失败。

2. 必须带上Magento的CSRF令牌 #

Magento 2默认启用了CSRF保护，购物车页面属于用户会话相关的场景，Firefox的会话cookie处理逻辑可能没有自动带上令牌，导致请求被拦截。你需要把form_key加到FormData里：

首先在模板文件中获取CSRF令牌（或者从页面的隐藏字段读取）：

<!-- 模板里的隐藏字段，Magento通常会自动生成 -->
<input type="hidden" name="form_key" value="<?= $block->getCsrfToken() ?>">

然后在JS中添加到FormData：

var formData = new FormData();
formData.append('myVar', "something");
formData.append('myFile', fileToUpload);
// 加入CSRF令牌
formData.append('form_key', document.querySelector('input[name="form_key"]').value);

这是解决大多数Magento AJAX跨浏览器问题的关键步骤。

3. 确保文件对象获取有效 #

Firefox在某些场景下对input.files[0]的处理可能存在差异，建议添加判断确保文件存在：

var inputField = document.getElementById('your-file-input-id');
if (!inputField || inputField.files.length === 0) {
    console.error('未选择文件或输入元素不存在');
    return;
}
var fileToUpload = inputField.files[0];

4. 完善错误日志排查 #

补全你的XHR回调函数，查看Firefox控制台的具体错误信息：

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status === 200) {
            console.log('上传成功:', xhr.responseText);
        } else {
            console.error('上传失败，状态码:', xhr.status, xhr.statusText);
            console.error('响应内容:', xhr.responseText);
        }
    }
};

打开Firefox开发者工具（F12），切换到「网络」标签，查看请求的状态码、响应内容，这能直接定位是请求被拒绝、控制器报错还是其他问题。

5. 检查控制器的请求处理逻辑 #

确保你的自定义控制器正确处理multipart/form-data请求，示例代码如下：

<?php
namespace Vendor\Module\Controller\Myurl;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Json\Helper\Data as JsonHelper;

class Index extends Action
{
    protected $jsonHelper;

    public function __construct(
        Context $context,
        JsonHelper $jsonHelper
    ) {
        parent::__construct($context);
        $this->jsonHelper = $jsonHelper;
    }

    public function execute()
    {
        $request = $this->getRequest();
        // 验证是AJAX POST请求
        if ($request->isAjax() && $request->isPost()) {
            $myVar = $request->getParam('myVar');
            $file = $request->getFiles('myFile');
            
            // 这里添加你的文件上传处理逻辑，比如移动文件到指定目录
            
            $response = ['success' => true, 'message' => '文件上传成功'];
            $this->getResponse()->representJson($this->jsonHelper->jsonEncode($response));
            return;
        }

        // 非法请求返回错误
        $this->getResponse()->setStatusCode(400);
        $this->getResponse()->representJson($this->jsonHelper->jsonEncode(['error' => '无效请求']));
    }
}

按照这几个步骤排查，基本能解决Firefox下的上传失效问题。

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