Express 服务器 returns 空字符串作为 Vite 中代理请求的响应
Express server returns empty string as a response for proxied requests in Vite
前端到后端的请求代理成功。服务器获取并记录预期的数据。但是前端记录空字符串,尽管后端返回记录的确切数据。
后端代码:
const app = express()
app.use(express.json())
app.listen(8000, () => console.log('working'))
app.get('/current', async (req, res) => {
const { lat, lon } = req.query
try {
const response = await axios.get(
`https://api.openweathermap.org/data/2.5/weather?units=metric&lat=${lat}&lon=${lon}&appid=${process.env.API_KEY}`
)
console.log(response.data) //logs expected data
res.json(response.data)
} catch (e) {
console.error(e)
res.json(e)
}
})
前端代码:
const { data } = useSWRV(
() => `/api/current?lat=${lat}&lon=${lon}`,
async key => {
const res = await axios.get(key)
console.log(res.data) //logs empty string
return res.data
}
)
ViteConfig.ts
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
server: {
proxy: {
'/api': {
forward: 'http://localhost:8000',
secure: false,
ws: true,
rewrite: path => path.replace('api', ''),
},
},
},
})
我尝试在没有代理的情况下直接向 http://localhost:8000
发送请求,这导致了 CORS 错误(缺少允许的来源)。
使用代理时没有记录错误消息。
傻我。将 forward: 'http://localhost:8000'
更改为 target: 'http://localhost:8000'
解决了问题。
前端到后端的请求代理成功。服务器获取并记录预期的数据。但是前端记录空字符串,尽管后端返回记录的确切数据。
后端代码:
const app = express()
app.use(express.json())
app.listen(8000, () => console.log('working'))
app.get('/current', async (req, res) => {
const { lat, lon } = req.query
try {
const response = await axios.get(
`https://api.openweathermap.org/data/2.5/weather?units=metric&lat=${lat}&lon=${lon}&appid=${process.env.API_KEY}`
)
console.log(response.data) //logs expected data
res.json(response.data)
} catch (e) {
console.error(e)
res.json(e)
}
})
前端代码:
const { data } = useSWRV(
() => `/api/current?lat=${lat}&lon=${lon}`,
async key => {
const res = await axios.get(key)
console.log(res.data) //logs empty string
return res.data
}
)
ViteConfig.ts
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
server: {
proxy: {
'/api': {
forward: 'http://localhost:8000',
secure: false,
ws: true,
rewrite: path => path.replace('api', ''),
},
},
},
})
我尝试在没有代理的情况下直接向 http://localhost:8000
发送请求,这导致了 CORS 错误(缺少允许的来源)。
使用代理时没有记录错误消息。
傻我。将 forward: 'http://localhost:8000'
更改为 target: 'http://localhost:8000'
解决了问题。