“网络离线，Access-Control-Allow-Origin 不允许 Origin，正在卸载页面”来自 Android React Native 中的超级代理

Question

我正在使用 superagent 从我的 React Native 应用上传文件。它在 iOS 上工作得很好，但在 Android 上它给出了这个错误：

Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

我在这里创建了一个最小示例 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

react-native 中的 http 客户端基本上是带有 JS bridge 的原生 http 客户端，它没有像 web 那样的 CORS 限制，所以你不需要在你的 express 服务器中允许 CORS。

就 superagent 而言，您似乎需要进行一些调整才能在 react-native 中使用它，请查看 this issue

Answer 2

感谢大家的帮助。在确认错误不太可能是 CORS 后，我对调试器进行了一些挖掘并发现了实际错误：Binary FormData part needs a content-type header

从那里，我能够做更多的挖掘，发现我被文档 https://visionmedia.github.io/superagent/#attaching-files 误导了（至少在 Android 上）作为 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)

“网络离线，Access-Control-Allow-Origin 不允许 Origin，正在卸载页面”来自 Android React Native 中的超级代理

“the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded” from superagent in Android React Native

javascript

superagent

react-native

react-native-android