expo代理配置，Web api调用

Question

我正在 React Native 中进行 API 调用，如下所示：

let response = await fetch('localhost:5000/api/klant/1');

我想做

let response = await fetch('/api/klant/1');

使用 React Native 可以在 package.json 中设置代理conf。我想知道独立的博览会应用程序是否也可以做到这一点。

package.json 的示例

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "eject": "expo eject" }, "dependencies": { "expo": "^32.0.0", "expokit": "^32.0.7", "react": "16.5.0", "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", "react-redux": "^6.0.1", "redux": "^4.0.1" }, "devDependencies": { "babel-preset-expo": "^5.0.0" }, "proxy": "localhost:5000", "private": true }

提前致谢！

Answer 1

expo的web服务基于webpack，expo提供了自定义webpack配置的方法： https: //docs.expo.dev/guides/customizing-webpack

在您的示例中，您可以像文档中所述创建 webpack.config.js 。然后设置代理：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.devServer = {
    proxy: {
      '/api': 'http://127.0.0.1:5000'
    }
  }

  return config;
};

它将任何请求发送到/api/**/*5000 端口。