axios не работает с данными почтового файла с новым FormData ()

-2

Мой предыдущий код для загрузки файлов работает с вызовом 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 по адресу https://example.com/ из источника " http://localhost: 9002 " был заблокирован политикой CORS: поле заголовка запроса Access-Control-Allow-Origin не разрешено Access-Control- Разрешить заголовки в предполетном ответе.

Ошибка: ошибка сети при 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);
});
  • 0
    Извините за ошибку опечатки заголовка, это должно быть "axios не работает с файлом поста с новым FormData ()"
  • 0
    Вы можете отредактировать свой вопрос и удалить опечатку! И вы должны отредактировать формат вашего кода AJAX.
Показать ещё 3 комментария
Теги:
axios

2 ответа

0

Ошибка возникает из-за того, что браузер отправляет запрос, чтобы проверить, разрешен ли доступ к 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: Изменения должны быть сделаны на стороне сервера, а не на стороне клиента.

  • 0
    спасибо, но я загружаю файл через $ .ajax (), он успешно загружен.
  • 0
    вы правильно устанавливаете значения по умолчанию или свойства экземпляра? они оба используют XHR под капотом, так что это не должно иметь никакого значения @DheerajRao
0

Доступ к XMLHttpRequest по адресу https://example.com/ из источника " http://localhost: 9002 " был заблокирован политикой CORS: поле заголовка запроса Access-Control-Allow-Origin не разрешено Access-Control- Разрешить заголовки в предполетном ответе.

Это потому, что вы пытаетесь установить заголовок Access-Control-Allow-Origin в запросе.

Нет смысла это делать. Access-Control-Allow-Origin - это заголовок ответа, который сервер устанавливает для предоставления клиенту разрешения на передачу данных в JS.

Удалить этот заголовок.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню