«сеть отключена, Origin не разрешен Access-Control-Allow-Origin, страница выгружается» из суперагента в Android React Native

Я использую superagent для загрузки файлов из своего приложения React Native. На iOS работает отлично, а на Android выдает такую ​​ошибку:

Возможные причины: сеть отключена, Origin не разрешен Access-Control-Allow-Origin, страница выгружается и т.д.

Я создал минимальный пример здесь https://snack.expo.io/@twohill/upload-example и скопировал приведенный ниже код на случай, если закуска исчезнет:

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import * as DocumentPicker from 'expo-document-picker';
import superagent from 'superagent';

import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

const upload = (file, setMessage) => {
  const { name } = file;

  superagent.post('https://example.org/uploads') // <-- change this URL to your server that accepts uploads and is CORS enabled
    .set('Authorization', 'BEARER xxxyyy') // <-- JWT token here
    .attach('uri', file, name)
    .then(
      result => setMessage(JSON.stringify({result})),
      error => setMessage(JSON.stringify({error}))
      );
};

const pickDocuments = async (setMessage) => {
  const file = await DocumentPicker.getDocumentAsync({ copyToCacheDirectory: true });
  if (file.type === "success") {
    upload(file, setMessage);
  }
}

export default class App extends Component {
  state = {
    message: null,
  }
  render() {
    const { message } = this.state;
    return (

      <View style={styles.container}>
       <TouchableOpacity onPress={() => pickDocuments(message => this.setState({message}))}>
        <Text style={styles.paragraph}>
          Tap to upload a file
        </Text>
        <Card>
          <AssetExample />
        </Card>
        <Card><Text>{message}</Text></Card>
         </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Если я console.log ошибка, это дает следующее:

Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
* http://192.168.1.3:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:282311:24 in crossDomainError
- node_modules\@sentry\utils\dist\instrument.js:224:24 in <anonymous>
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:566:23 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

Насколько я могу судить, на Android приложение никогда не пытается загрузить. На моем сервере работает express, и промежуточное ПО cors включено с конфигурацией по умолчанию.

{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

Есть идеи, что здесь делать? У меня такое ощущение, что Android отказывается от происхождения «*», но понятия не имею, что поставить на место для мобильного приложения.

Или я совсем не на то дерево лаю?


person alt    schedule 05.02.2020    source источник
comment
Из stackoverflow.com/a/46966838/441757 я вижу, что superagent является источником той ошибки, в которой упоминается "Origin не разрешено Access-Control-Allow-Origin» — в частности, код на github.com/visionmedia/superagent/blob/master/src/. Но часть сообщения «Происхождение не разрешено Access-Control-Allow-Origin» вводит в заблуждение, поскольку Node не применяет политику того же источника; поэтому CORS и заголовок Access-Control-Allow-Origin не имеют значения. Таким образом, фактическая причина ошибки заключается в чем-то другом, а не в CORS.   -  person sideshowbarker    schedule 05.02.2020
comment
Ответы на stackoverflow.com/a/39454628/441757 и stackoverflow.com/a/32570827/441757 может иметь значение, а может и не иметь здесь значения: «Причина в том, что ЛЮБОЕ нажатие кнопки обрабатывается как отправка, а форма не имеет отправки цель действия. Одним из решений является добавление обработчика событий preventDefault».   -  person sideshowbarker    schedule 05.02.2020


Ответы (2)


Спасибо всем за помощь. С подтверждением того, что ошибка вряд ли будет CORS, я немного покопался с отладчиком и нашел реальную ошибку: Binary FormData part needs a content-type header

скриншот XMLHttpRequest

Оттуда я смог еще больше покопаться и обнаружил, что документация https://visionmedia.github.io/superagent/#attaching-files, так как карта options, которую я отправлял, игнорировалась

отладчик, показывающий базовый вызов добавления FormData

С помощью пакета react-native-mime-types исправленный код выглядит так:

  //snip
  const fileWithMime = { ...file, type: mime.lookup(name) };

  request.post(`${SERVER_URL}/uploads`)
    .set('Authorization', cookie)
    .withCredentials()
    .attach('uri', fileWithMime)
person alt    schedule 07.02.2020

http-клиент в react-native — это в основном собственный http-клиент с мостом JS, у него нет ограничений CORS, как в Интернете, поэтому вам не нужно разрешать CORS на вашем экспресс-сервере.

Что касается superagent, кажется, вам нужна некоторая настройка, чтобы использовать его в react-native, проверьте эта проблема

person duan    schedule 05.02.2020
comment
Я предполагал, что CORS не требуется, однако я также обслуживаю веб-клиентов, поэтому для этого это необходимо. Также я не уверен, что ссылка на проблему больше применима - иначе она не была бы сломана и на iOS? - person alt; 05.02.2020