Мой предыдущий код для загрузки файлов работает с вызовом 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);
});
Ошибка возникает из-за того, что браузер отправляет запрос, чтобы проверить, разрешен ли доступ к 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: Изменения должны быть сделаны на стороне сервера, а не на стороне клиента.
Доступ к XMLHttpRequest по адресу https://example.com/ из источника " http://localhost: 9002 " был заблокирован политикой CORS: поле заголовка запроса Access-Control-Allow-Origin не разрешено Access-Control- Разрешить заголовки в предполетном ответе.
Это потому, что вы пытаетесь установить заголовок Access-Control-Allow-Origin
в запросе.
Нет смысла это делать. Access-Control-Allow-Origin
- это заголовок ответа, который сервер устанавливает для предоставления клиенту разрешения на передачу данных в JS.
Удалить этот заголовок.