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

Question

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

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

Я создал здесь минимальный пример 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 скрывает источник "*", но понятия не имею, что нужно установить для мобильного приложения.

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

Answer 1

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

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

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

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

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

Answer 2

Http-клиент

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

С точки зрения superagent, кажется, вам нужно немного настроить его, чтобы использовать его в реагирующе-родном, оформить заказ эта проблема