时间戳

首页 > 解决方案 > Expo React Native 项目的 Axios 配置中未设置环境变量

react-native - Expo React Native 项目的 Axios 配置中未设置环境变量

问题描述

我正在尝试.env在我的 Expo 项目根目录中使用一个文件，该文件带有一个用于 Axios 请求的 API URL，位于一个名为axios.ts.

import axios from 'axios';

const Axios = axios.create({
  baseURL: process.env.REACT_APP_API_URL
});

Axios.defaults.headers.common['Content-Type'] = 'application/json';

export default Axios;

为了使其正常工作，我按照Expo 官方文档的dot-env建议安装了该库

这是我的package.json

  {
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "start-expo": "expo start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/picker": "1.6.0",
    "@react-navigation/drawer": "^5.9.0",
    "@react-navigation/material-top-tabs": "^5.2.13",
    "@react-navigation/native": "^5.7.0",
    "@react-navigation/native-stack": "^5.0.5",
    "@react-navigation/stack": "^5.9.0",
    "axios": "^0.20.0",
    "dotenv": "^8.2.0",
    "events": "^3.1.0",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "~0.62.2",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-paper": "^3.10.1",
    "react-native-reanimated": "~1.9.0",
    "react-native-screens": "~2.9.0",
    "react-native-tab-view": "^2.14.4",
    "react-native-table-component": "^1.2.1",
    "react-native-unimodules": "~0.10.0",
    "react-native-vector-icons": "^7.0.0",
    "react-native-web": "~0.11.7",
    "react-native-webview": "9.4.0",
    "react-redux": "^7.2.0",
    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.23",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.61.23",
    "@types/react-native-vector-icons": "^6.4.5",
    "babel-plugin-inline-dotenv": "^1.6.0",
    "babel-preset-expo": "~8.2.0",
    "expo": "~38.0.1",
    "expo-updates": "~0.2.8",
    "jest-expo": "~38.0.0",
    "typescript": "~4.0.2"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

当然我也设置了babel.config.js文件

module.exports = function(api) {
  api.cache(true);
  return {
    plugins: ['inline-dotenv'],
    presets: ['babel-preset-expo'],
  };
};

当我对某个端点进行 API 调用时，就会出现问题。

import Axios from "../../api/axios";
const login = async () => {
  console.log(process.env.REACT_APP_API_URL);
  try{
   const response = await Axios.post(ENDPOINTS.login,{
        email,
        password,
        device_id
      });
      console.log(response);
    }catch(e){ //TODO : deal with errors
      console.log(e);
    }
 };

404 error如果我直接设置字符串，则在使用.env文件并正常工作时请求会得到一个。

import axios from 'axios';

const Axios = axios.create({
  baseURL: 'http://myurl..." // This is working as expected!
});

Axios.defaults.headers.common['Content-Type'] = 'application/json';

export default Axios;

似乎.env文件设置不正确，但根据console.log()，它具有正确的值。我怀疑原因是环境变量是在调用 Axios 函数之后设置的，所以一开始它是空的，但是当日志出现时它已经设置好了。

我的解释是否合理或其他设置可能导致此问题？

标签： react-nativeexpo

解决方案

第二天测试后，我很惊讶它工作正常，所以我假设缓存有问题。对于遇到此问题的任何人，我建议删除 Expo 中的缓存并重试

推荐阅读