Загрузка изображения с помощью Axios (реагировать) и PHP - PullRequest
Новая
       7

Загрузка изображения с помощью Axios (реагировать) и PHP

0 голосов
/ 01 ноября 2018

Я получаю это сообщение на консоли, когда делаю запрос с помощью Axios в файл PHP 

Access to XMLHttpRequest at 'http://cp.com.br/cpnr-upload/' from 
origin 'http://localhost:3000' has been blocked by CORS policy: No 
'Access-Control-Allow-Origin' header is present on the requested resource.

Дело в том, что целевой файл уже находится сверху: header('Access-Control-Allow-Origin: *');

Код запроса в React: 

handleUploadChange = (e) => {
let files = e.target.files;
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = (e) => {
  const url1 = "http://local.url/image-upload/";
  var data1 = new FormData();
  data1.set('action','upload');
  data1.set('file', e.target.result);
  return axios({
    method : "POST",
    url : url1,
    data : data1
  }).then(response => {
    console.warn("result", response);
  });
}
return;

HTML-код внутри функции рендеринга: 

<input
      onChange = {this.handleUploadChange}
      className={classes.uploadInput}
      accept="image/*"
      id="outlined-button-file"
      multiple
      type="file"
/>

1 Ответ

0 голосов
/ 05 января 2019

Если вы используете Laravel, попробуйте использовать это https://github.com/barryvdh/laravel-cors. Если вы обычный PHP, с браузером Chrome (я полагаю, вы это делаете), используйте это расширение: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi. Это проблема CORS, когда вы используете React в качестве внешнего интерфейса и PHP в качестве внутреннего.

PS: помните, что если вы localhost, используйте url как http://127.0.0.1, а не http://localhost

...