Question

我之前的文件上传代码正在使用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）实现相同的任务。但是我得到了错误：

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

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

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

Answer 1

发生此错误是因为浏览器发送了一个请求，以检查是否允许从其他域的浏览器访问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：更改是在服务器端而不是客户端上进行的。

Answer 2

CORS策略已阻止从来源“ https://example.com/”访问“ http://localhost:9002”处的XMLHttpRequest：Access-Control-Allow-不允许请求标头字段Access-Control-Allow-Origin飞行前响应中出现标题。

这是因为您试图在请求上设置Access-Control-Allow-Origin头。

这样做是没有意义的。 Access-Control-Allow-Origin是响应标头，服务器将其设置为授予客户端权限，以将数据传递给JS。

删除该标题。

axios无法使用新的FormData（）处理发布文件数据

2 个答案: