时间戳

首页 > 解决方案 > axios 不适用于新 FormData() 的发布文件数据

javascript - axios 不适用于新 FormData() 的发布文件数据

问题描述

我之前的文件上传代码使用 jQuery Ajax 调用。但是当我尝试使用 Axios 库完成相同的任务时，我遇到了错误。我也为此搜索解决方案，但没有找到。如果有人遇到这个问题。指导我们。我之前在 Ajax 调用中的代码：

$.ajax({
    url: this.props.url,
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    success: function (response) {
        console.log(response);
    },
    error: function (err) {
        console.log(err);
    }
});

但是在我的新项目（ReactJs 和 Axios）中，我试图用 Axios(v0,17.0) 来完成同样的任务。但我收到错误：

从源“ http://localhost:9002 ”访问“ https://example.com/ ”处的 XMLHttpRequest已被 CORS 策略阻止：访问控制不允许请求标头字段 Access-Control-Allow-Origin-预检响应中的允许标头。

错误：在 XMLHttpRequest.handleError (xhr.js:87) 的 createError (createError.js:16) 处出现网络错误

在 Axios 中的代码下面，我使用 formData() 将文件附加到 eaily。

import axios from 'axios';

let formData = new FormData();
formData.append('noteFilename', files);

axios({
    method : 'POST',
    url : this.props.url,
    data:formData,
    headers: {
        'cache': false,
        'Content-Type' : false,
        'processData': false,
        'Access-Control-Allow-Origin': '*',
        'crossDomain' : true,
    },
    withCredentials: true,
}).then((response) => {
    console.log("response", response)

}).catch(function (error) {
    console.log(error);
});

标签： javascriptajaxreactjsaxios

解决方案

发生该错误是因为浏览器发送请求以检查是否允许从不同域的浏览器访问该 api。将标头添加到服务器以供客户端了解它可以进行调用并将获得后续 GET/POST 调用的有效响应。

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

您甚至可以通过Access-Control-Allow-Origin密钥限制域

response.setHeader("Access-Control-Allow-Origin", "xyz.com");

PS：更改是在服务器端而不是客户端进行的。

推荐阅读