axios 無法處理新的 FormData() 后文件數據

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) 來完成同樣的任務。 但我收到錯誤：

訪問 XMLHttpRequest at ' https://example.com/ ' from origin ' http://localhost:9002 ' 已被 CORS 策略阻止：請求頭字段 Access-Control-Allow-Origin is not allowed by Access-Control-預檢響應中的 Allow-Headers。

錯誤：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);
});

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

訪問 XMLHttpRequest at ' https://example.com/ ' from origin ' http://localhost:9002 ' 已被 CORS 策略阻止：請求頭字段 Access-Control-Allow-Origin is not allowed by Access-Control-預檢響應中的 Allow-Headers。

這是因為您試圖在請求上設置Access-Control-Allow-Origin標頭。

這樣做毫無意義。 Access-Control-Allow-Origin是服務器設置的響應頭，用於授予客戶端將數據傳遞給 JS 的權限。

刪除該標題。