我在后端使用Express构建一个应用程序，在前端使用React构建一个应用程序，前端使用的是typescript，我使用Vite构建前端（我第一次使用Vite）。我的API运行良好，但我无法在前端获取数据。前端的简化代码：
React.useEffect(() => {
const fetchData = async () => {
const response = await fetch("/api/data");
const json = await response.json();
if (response.ok) {
setData(json);
}
};
fetchData();
}, []);它一直在回复中给我发这个html：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx?t=1675714554862"></script>
</body>
</html>我试着在我的html文件中添加上面提到的脚本，但是错误仍然存在。我不确定它是否可能在vite.config.ts中：
export default defineConfig({
build: {
outDir: "dist",
},
server: {
port: 3001,
},
plugins: [react()],
});我已经允许package.json文件中的代理来处理CORS，但这似乎不是问题所在。我想我忽略了一些重要的东西，但我不确定是什么...有人能帮忙吗？
1条答案
按热度按时间zd287kbt1#
您可能希望在您的Vite配置中设置一个代理。
https://vitejs.dev/config/server-options.html#server-proxy
假设您的API侦听端口3000，请将此
proxy属性添加到server对象：