I have a page, I want it to render the page through SSR, So I writing for this:
<script setup lang="ts">
const route = useRoute();
const id = route.params.id;
const { data: res, error } = await useFetch<Result<ProductDeatil>>(
'/api/product/getProductById',
{ query: { id } }
);
<script>
And I have proxy config like this:
nitro: {
devProxy: {
"/api/": {
target: "http://localhost:8081/",
changeOrigin: true,
},
},
},
I think look like everything is ok, But, when i run npm run dev and open this page, my commond tell me :
WARN [Vue Router warn]: No match found for location with path "/api/product/getProductById?id=1831996465501712385"
WARN [Vue Router warn]: No match found for location with path "/api/product/getProductById"
And page is blank page, I am Very Confused! Why this '/api/product/getProductById' not proxyed???
This is my package.json:
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --host 0.0.0.0",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@element-plus/nuxt": "^1.0.10",
"cropperjs": "^1.6.2",
"nuxt": "^3.12.4",
"quill": "^2.0.2",
"vue": "latest"
},
"devDependencies": {
"sass-embedded": "^1.77.8"
}
}
I searched for information and found a Korean blog(Nuxt3-proxy) that introduced many proxy methods. I tried almost all of them, but it didn’t work unless I added the full service address in front of the URI, such as:
const { data: res, error } = await useFetch<Result<ProductDeatil>>(
'http://localhost:3000/api/product/getProductById',
{ query: { id } }
);
If I add http://localhost:3000 to the url, the page can be rendered normally through SSR. I think this shows that there is no problem with my proxy configuration, but why it will not be proxied without adding http://localhost:3000, which makes me very distressed. Does anyone know why?
If you know the reason and how fix it, and willing to share it, I would be very grateful!
After some attempts, I found that configuring routeRutes can solve unexpected routing errors caused by useFetch, such as adding nitro.routeRutes configuration to nuxt.config below:
nitro: {
routeRules: {
"/api/**": {
proxy: "http://localhost:8081/**",
},
},
devProxy: {
"/api/": {
target: "http://localhost:8081/",
changeOrigin: true,
},
},
}