Я создал API для своего сайта React для получения / загрузки изображений с использованием fetch.
Он работает для ПК и телефонов Android, не удосужился проверить Safari, пока пользователи не сказали, что не могут сделать это на iPhone / iPad.
Подключил MacBook и увидел, что я получаю ошибки CORS при загрузке файла:
Origin https://xxxxxxx is not allowed by Access-Control-Allow-Origin
Забавно, когда страница загружается, она вызывает тот же API для извлечения существующих изображений, и это прекрасно работает.
Мой API - это PHP, я уже добавил строки вверху:
header("Access-Control-Allow-Origin: https://xxxxxxx");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Access-Control-Allow-Headers: X-Requested-With, Accept, Content-Type, Origin, Content-Length, Accept-Language, Host, User-Agent, Referer, Accept-Encoding, Connection");
Парни из клянусь поклясться, что открыли свой WAF, чтобы разрешить загрузку (я верю им, потому что телефоны на ПК / Android работают)
Я пытался использовать Chrome на iPhone, но это тоже не работает.
Все выборки проходят через это:
const API_URL = 'api_url';
const customFetcher = async (formData) => {
let response = fetch(API_URL, {
method: 'POST',
body: formData,
mode: 'cors'
})
.then(r => {
console.log('custom', r.status);
if (r.status === 205) {
throw new Error('Session expired');
} else {
return r;
}
});
return response;
}
export default customFetcher;
Выборка загрузки, которая выдает ошибку CORS:
let formData = new FormData();
formData.append('auth', this.props.user.state.token);
formData.append('key', 'le_key')
formData.append('what', 'upload');
formData.append('userId', this.props.user.state.userId);
formData.append('serialNo', this.state.serialNo + '|' + this.state.firstName + '|' + this.state.lastName)
formData.append('photo', this.state.selectedFiles[0]);
customFetcher(formData)
...
Выборка для извлечения существующих изображений:
let formData = new FormData();
formData.append('auth', this.props.user.state.token);
formData.append('key', 'le_key')
formData.append('what', 'photo');
formData.append('userId', this.props.user.state.userId);
formData.append('serialNo', this.state.serialNo + '|' + this.state.firstName + '|' + this.state.lastName);
customFetcher(formData)
.then(r => {
if (r.status !== 404) {
return r.blob();
} else {
this._setNoImage();
return false;
}
})
ПРОГРЕСС:
Хорошо, узнал, что это работает, если я возьму свежую фотографию из файла ввода!
Это означает, что он посылает пустой файл, который вызывает эту ошибку, если я выбираю в браузере файлов.
Итак, вопрос в том, как я могу получить этот выбранный файл?
Я делаю это:
<FormControl
type="file"
onChange={this._updateFile}
/>
_updateFile = (e) => {
this.setState({
selectedFiles: e.target.files[0]
})
}
Я даже пытался проверить размер файла, но это хорошо, так или иначе, ничего не отправляя. Есть идеи? ТИА