时间戳

首页 > 解决方案 > 不能在 Gatsby 中使用代理

node.js - 不能在 Gatsby 中使用代理

问题描述

我正在使用Gatsby并且正在尝试使用该Axios库获取一些 API 内容，到目前为止，我已在以下配置中添加了以下配置gatsby-config.js：

proxy: [
{
    prefix: "/api",
    url: process.env.API_URL,
  },
],

whereAPI_URL在开始gatsby-config.js使用时加载：

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

现在的问题是当我执行这样的请求时：

const res = await axios.get("/api/sections")

这是使用http://localhost:8000/api/sectionswhich 实际上很奇怪执行的，因为我认为Gatsby应该拦截/api前缀，然后使用我使用API_URL变量给出的 url。

我正在Gatsby开发模式下运行。

我做错了什么？

标签： node.jsaxiosgraphqlenvironment-variablesgatsby

解决方案

API_URL未在gatsby-config.js. 以下片段：

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

.env.development告诉 Gatsby 在和中查找环境变量.env.production（默认运行gatsby develop或gatsby build分别）。由于您没有定义环境文件，因此 Gatsby 不知道process.env.API_URL.

在项目的根目录中创建一个.env.developmentand并定义一个变量。.env.productionAPI_URL

API_URL= yourUrl.com

将您的 axios 请求更改为：

const axios = require('axios');
const res = await axios.get('/api/sections', {
  proxy: {
    host: process.env.API_URL,
    port: 3000 //remove if not needed
  }
});

之后，您的请求将被添加前缀。

如果您使用第三方模块，Gatsby 不会捕获外部请求。根据API Proxy 文档，它似乎只适用于原生 JavaScriptfetch函数。

推荐阅读