Axios/Fetch不使用next.config.js重写

Question

在线查找几个示例，似乎所有人都需要将请求重定向到后端，只是将重写添加到next.config.js文件中，并且它应该工作。然而，我一定是错过或误解的东西，因为这似乎没有单独做的伎俩。如果我在浏览器中输入url，重定向似乎可以工作，但是来自axios/fetch的调用继续尝试使用相对于我的客户端的路径。以下是我的片段:

next.config.js

module.exports = {
async rewrites() {
return [
{
source: '/api',
destination: 'http://localhost:3001',
},
]
},
};

组件/MyComponent.js

import React, { useEffect } from "react";
import axios from "axios";
function MyComponent({projectName}) {
...
useEffect(() => {
axios.get("/api/project/" + projectName)
.then((res) => {
console.log(res);
});

return;
}, []);
...
};
export default MyComponent;

澄清一下，如果我从浏览器点击http://localhost:8001/api/project/Name_of_Project，我将被正确地重定向到我的服务器(托管在端口3001上)并接收我期望的数据。然而，当我击中我的客户端(http://localhost:8001/Name_of_Project)时，axios不会重定向并尝试http://localhost:8001/api/project/Name_of_Project，这显然失败了。我还尝试了fetch等效而不是axios，并得到了相同的结果。

我还需要采取其他步骤吗?重写对axios/fetch不起作用吗?在我的搜索中，我也看到了next-http-proxy-middleware包，但我不确定这是否是我需要与重写结合使用的东西。

我欣赏任何见解!

编辑1:在做了更多的搜索之后，我看到了这篇文章，发现我的问题是因为我在axios调用中使用了相对路径。如果改成:

axios.get("http://localhost:3001/api/project/" + projectName)
.then((res) => {
console.log(res);
});

，然后我得到我的数据正确。我想这导致我的下一个问题:有没有一种方法来使用相对路径旁边重写配置?我个人认为这样暴露主机名和端口有点难看(我最终计划在FQDN上托管这个应用程序)。所以如果有什么可以做的，我很想知道!

编辑2当然，我第一次编辑的改变是有效的，因为我直接击中了我的服务器!这不是我们想要的效果。我想使用重定向设置在配置到我的api。

Answer 1

啊哈!我误会了什么。我假设重写中的路径会免费重新附加我的路径参数。事实并非如此。文档的链接。

相关节选:

通配符路径匹配

要匹配通配符路径，可以在参数后使用*，例如/blog/:slug*将匹配/blog/a/b/c/d/hello-world:

module.exports = {
async rewrites() {
return [
{
source: '/blog/:slug*',
destination: '/news/:slug*', // Matched parameters can be used in the destination
},
]
},
}

所以我的更正next.config.js:

module.exports = {
async rewrites() {
return [
{
source: '/api/:slug*',
destination: 'http://localhost:3001/api/:slug*',
},
]
},
};