How to fix 3XX redirect in sitemap error in Nuxt 3 website?

Question

My website is built with Nuxt 3 and has a problem with 3XX redirect in sitemap. This is an issue that ahrefs.com audit tool detected. It means that some of the URLs in my sitemap are not live, but they redirect to the same URLs with a slash at the end. For example: “https://www.example.com/blog/post-1” redirects to “https://www.example.com/blog/post-1/”

This can confuse search engines and affect my SEO performance.

I have tried to fix this error by using the trailingSlash option in my nuxt.config.ts file to force trailing slashes on every URL, and by using the redirect option to define redirections with middlewares. I have also used the @nuxtjs/sitemap module to create and update my sitemap automatically. However, none of these solutions worked for me.

Here is my partial nuxt.config.ts file:

import axios from "axios";
const getPostRoutes = async () => {
  const response = await axios.get(
    process.env.API_URL + "/get-quotes?page=1&limit=400"
  );
  const routes = response?.data?.data.map(
    (quote: any) => `/quote/${quote.slug}`
  );
  if (routes) {
    return routes;
  }
};
export default defineNuxtConfig({
  target: "static",
  ssr: true,
  app: {
    head: {
      meta: [
        {
          name: "google-site-verification",
          content: process.env.SEARCH_CONSOLE,
        },
      ],
      viewport: "width=device-width, initial-scale=1.0",
      htmlAttrs: {
        lang: "en",
      },
    },
  },

  css: ["~/assets/scss/style.scss"],
  typescript: {
    strict: true,
  },
  serverMiddleware: ["~/server/middlewere/header.ts"],
  modules: [
    "@pinia/nuxt",
    "@nuxt/content",
    "nuxt-icons",
    "@nuxt/devtools",
    "nuxt-gtag",
    "@nuxt/image",
    "nuxt-simple-sitemap",
  ],
  buildModules: [
    "@nuxtjs/style-resources",
    "@nuxtjs/axios",
    "@nuxt/typescript-build",
  ],
  gtag: {
    id: process.env.G_TAG,
    config: {
      page_title: "The Speakers",
    },
  },
  routeRules: {
    "/account/**": { index: false },
    "/contact-us": { index: false },
    "/chat": { index: false },
  },
  runtimeConfig: {
    public: {
      API_URL: process.env.API_URL,
    },
  },

  plugins: [
    { src: "@/plugins/aos.js", mode: "client" },
    { src: "@/plugins/axios.ts", mode: "client" },
    { src: "@/plugins/fb-sdk.ts", mode: "client" },
  ],
  build: {
    transpile: ["fb-sdk"],
  },
  render: {
    static: {
      setHeaders: (
        resp: {
          req: { originalUrl: string };
          setHeader: (arg0: string, arg1: string) => void;
        },
        path: any
      ) => {
        if (
          resp.req.originalUrl === "/.well-known/apple-app-site-association"
        ) {
          resp.setHeader("Content-Type", "application/json");
        }
      },
    },
  },

  hooks: {
    async "nitro:config"(nitroConfig) {
      const slugs = await getPostRoutes();
      nitroConfig.prerender.routes.push(...slugs);
    },
  },
  nitro: {
    devProxy: {
      "/api/": {
        target: process.env.SITEMAP,
        changeOrigin: true,
      },
    },
    prerender: {
      crawlLinks: true,
      routes: ["/", "sitemap.xml"],
      ignore: ["/account/**"],
    },
  },
  generate: { fallback: "404.html" },
  extend(config: { resolve: { symlinks: boolean } }, ctx: any) {
    config.resolve.symlinks = false;
  },
  site: {
    url: process.env.SITEMAP,
  },
  sitemap: {
    sources: ["/api/sitemap"],
  },
  routes: ["/"],
  nuxt: {
    host: "0.0.0.0",
    port: "3000",
  },
  devtools: {
    enabled: true,
  },
  trailingSlash: true,
});

Here is my .htaccess file:

RewriteEngine on
# Redirect non-www to www with https
RewriteCond %{HTTP_HOST} !^www\.(.*)$ [NC]
RewriteCond %{THE_REQUEST} !^GET\ https://
# RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]
# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php81” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php81 .php .php8 .phtml
</IfModule>

Here is my server/routes/sitemap.xml.ts file:

const sitemap = new SitemapStream({ hostname: process.env.SITEMAP });

const postRoutesList = await getPostRoutes();

// Our root page.
sitemap.write({ url: '/' });

// Other page URLs.
sitemap.write({ url: '/quote/category/love' });
sitemap.write({ url: '/quote/category/life' });
sitemap.write({ url: '/quote/category/birthday' });
sitemap.write({ url: '/quote/category/motivational' });
sitemap.write({ url: '/quote/category/funny' });
sitemap.write({ url: '/quote/category/inspirational' });
sitemap.write({ url: '/quote/category/family' });
sitemap.write({ url: '/quote/category/movie' });

// Our Nuxt content pages.
postRoutesList.forEach((route) => sitemap.write({ url: route, changefreq: 'monthly' }));
sitemap.end();

return (await streamToPromise(sitemap));

here is the partial package.json

  "devDependencies": {
    "@nuxt/content": "^2.2.2",
    "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest",
    "@nuxt/types": "2.13.2",
    "@nuxtjs/style-resources": "^1.2.1",
    "@types/bootstrap": "^5.2.6",
    "@types/facebook-js-sdk": "^3.3.8",
    "html-to-image": "^1.11.11",
    "nuxt": "^3.6.5",
    "nuxt-gtag": "^0.6.1",
    "nuxt-icons": "^3.2.1",
    "nuxt-simple-sitemap": "^4.2.0",
    "sass": "^1.56.2",
    "typescript": "5.3.2"
  },
  "dependencies": {
    "@nuxt/image": "^1.0.0-rc.1",
    "@nuxtjs/axios": "^5.13.6",
    "@pinia/nuxt": "^0.4.6",
    "aos": "^2.3.4",
    "bootstrap": "^5.3.1",
    "fb-sdk": "^1.0.3",
    "yarn": "^1.22.19"
  }

Can anyone help me fix this error? I have searched for similar questions on Stack Overflow and other resources, but none of them solved my problem.