Vue app throws 404 from routes outside homepage

My project is on vue framework. When opening a url from the home page, there is no problem. But when opening the url from outside of homepage like inside from an email, there is 404 error, not found.

Guess it is a cors problem , so set a vercel.json as described in the following link: https://vercel.com/guides/how-to-enable-cors#enabling-cors-using%C2%A0vercel.json

1{2  "headers": [3    {4      "source": "/api/(.*)",5      "headers": [6        { "key": "Access-Control-Allow-Credentials", "value": "true" },7        { "key": "Access-Control-Allow-Origin", "value": "*" },8        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },9        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }10      ]11    }12  ]13}

But it did not work at all.

Hey, ! Welcome! 👋

Have you gone through our debugging 404 community post? It might be helpful in your use case if you mean that you've been seeing 404 deployment errors. https://community.vercel.com/t/debugging-404-errors/437

If not, could you share more on the exact error messages you're getting?

I'm not sure this is a CORS issue. Based on the behavior you described, the project might need a rewrite config change for SPA client-side routing support. The debugging guide Pauline shared has some examples.

If that doesn't solve it, having the exact error messages or a minimal reproducible example would let us dig into the problem more