CORS error with react vite

[hmejbri]

I'm using react vite and attempting to call an api in the same server and im getting cors errors, so I added a proxy which didnt work and the requests are not being redirected to api.domain.io instead they get sent to vworld.historiar.io which is the frontend url. The API is accessible both on the browser and postman so the problem is purely from vite:

import axios from "axios";

const verifToken = async () => {
  const queryParameters = new URLSearchParams(window.location.search);
  const token = queryParameters.get("token");
  const url = window.location.pathname.split("/");
  const site = url[url.length - 1];
  const api = `/api/credentials/${site}/${token}`;

  await axios
    .get(api)
    .then((response) => {
       console.log("Success ========>", response);
    })
    .catch((error) => {
       console.log("Error ========>", error);
    });
    };

export { verifToken };

vite.config.js :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { config } from "dotenv";

config();

export default defineConfig({
  base: "/browse/",
  plugins: [react()],
  define: {
    "process.env": process.env,
  },
  server: {
    proxy: {
      "/api": {
        target: "https://api.domain.io",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

[rschristian]

attempting to call an api in the same server (https://api.domain.io/ from https://vworld.domain.io/)

CORS matches origins; it doesn't matter if they're both sibling subdomains, if origin A !== origin B, you need to deal with CORS.

so I added a proxy which didnt work

Keep in mind the proxy is only going to run in dev, as you won't be running the Vite server in prod.

The API is accessible both on the browser and postman

CORS only triggers cross origin, as the name indicates -- for example, https://vworld.domain.io trying to send a request to https://api.domain.io. Accessing https://api.domain.io through your browser or postman ignores CORS entirely, as it's not cross origin.

CORS also isn't implemented outside of any browser to my knowledge, so postman will never report an error in that regard.

---

You should configure CORS on your API, whitelisting the web app.