Search code examples
reactjsvitevercel

Vercel 404 page not found when requesting a page using vite+ts

So i am trying vite and typescript, the website is fine in development but when i deployed it to vercel, it gave me:

404: NOT_FOUND
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'". Either the 'unsafe-inline' keyword

I dont think its because of my routing as it worked great in dev. Here is vercel's deployment log if it can help: enter image description here

Solution

  • Content Security Policy, that is, CSP is a measure of defense for your website from XSS (cross-site-scripting) or data injection attacks, protecting it from referring to outside sources that are considered to be unsafe. CSP is either defined in a meta tag, such as

    <meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

    It may also be set as a response header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

    The first thing you need to do in order to figure out the solution is to find out whether it's a response header or a meta tag in your case. If it's a response header, then you will need to look into your server settings or other resources that define response headers for your request.

    If it's a meta tag, then you will need to detect where it is being generated.

    Anyways, the error tells you that

    404: NOT_FOUND Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'". Either the 'unsafe-inline' keyword

    This means that you have a CSP for script-src which is

     "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'"

    If you have some other script, look into its source and the solution will probably be as simple as changing the CSP to allow that other source.

    The fact that this did not happen locally is a big clue that suggests that CSP is defined in a different manner on the server from your local, so it may be a server-setting or an unversioned code that defines it.