Javascript axios无法使用新FormData（）处理post文件数据

我以前的文件上传代码是使用jqueryajax调用的。但当我试图用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）实现同样的任务。但我得到了一个错误：

从源代码访问“”处的XMLHttpRequest “”已被CORS策略阻止：请求 不允许标题字段访问控制允许来源 访问控制允许飞行前响应中的标头

错误：网络错误 在createError（createError.js:16） 位于XMLHttpRequest.handleError（xhr.js:87）

下面是Axios中的代码，我使用formData（）将文件附加到ealy

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);
});

---

发生此错误的原因是浏览器发送一个请求，以检查是否允许从其他域上的浏览器访问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");

您甚至可以通过

访问控制允许来源

键限制域

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

备注：更改将在服务器端而不是客户端进行

CORS策略已阻止从源站“”访问“”处的XMLHttpRequest:飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许源站

这是因为您正试图在请求上设置

访问控制允许原点

头

那样做毫无意义

Access Control Allow Origin

是一个响应头，服务器将其设置为授予客户端将数据传递给JS的权限

---

删除该标题。

很抱歉标题输入错误，应该是“axios未使用带有新FormData（）的post文件”。您可以编辑问题并删除输入错误！您应该编辑AJAX代码的格式。CORS与服务器相关，不发送选项请求所需的标题。jQuery和react js项目的url是否相同。您必须在服务器上检查以添加所需的CORS HeaderYes URL相同。Axios不是jQuery。阅读Axios API文档。不要只是将您传递给jQuery的相同选项传递给它。谢谢，但我正在通过$.ajax（）上载文件。这已成功上载。您是否正确设置了axios默认值或实例属性？他们都在引擎盖下使用XHR，所以这不会对tbh@DheerajRao产生影响