"405 Method Not Allowed" Error when trying to make a POST request to my "/url" endpoint hosted on Vercel

[L1xus]

Summary

My frontend works perfectly fine but I keep getting errors when I'm interacting with my vercel server even though that everything works fine in my localhost !!!

Any help please I've been struggling with this for DAAAYS ;/

Example

No response

Steps to Reproduce

My project Structure is like this :

>node_modules
>public
   >css
   >js
   index.html
package.json
index.js

I've deployed everything on my vercel project and I've specified the routing correctly on vercel.json file

{
    "rewrites": [
        {
            "source": "/url", 
            "destination": "index.js"
        }
    ]
}

here is the index.js code that receives post requests

const app = express();
const port =  443 || 80 || 3000;

app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());

app.post('/url', async (req, res) => {
    console.log('Received POST request at /url');
    let { videoUrl } = req.body;
    
    // get url video
....
....
....

and here is the js code that sends the requests:

export const getUrl = async (url) => {
    let content = document.getElementById('content');
    console.log('Client-side sending request to /url');
    let res = await fetch('/url', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ videoUrl: url })
    })

    let { vid } = await res.json();

....
....

My frontend works perfectly fine but I keep getting errors when I'm interacting with my vercel server even though that everything works fine in my localhost !!!

Any help please I've been struggling with this for DAAAYS ;/

[L1xus]

@amyegan @swarnava can you please check this out !

[TooTallNate]

You should put the index.js file in the api directory instead. That will make it be executed as a Node.js function. Putting it at the root-level like you are doing now will make it be a static file.

In your client-side code, you can invoke the endpoint at POST /api (index is implied as the default). So there is no need for the rewrite in vercel.json.

[L1xus]

thank you so much for your response!
So my project structure should be like this ?

-> api 
     -index.js
->node_modules 
->public
    ->css
    ->js
    - index.html
-package.json

and I have to change my endpoint to /api in my client side code and without the need for vecel.json ?

[KickButtowski80]

what would happen if the name of the file was something else rather than index.js?
this issue just happen to me in development FYI

[sigmarsson]

Having perhaps a clue also in the case of RSC as depicted beneath ? I encounter 405 as

[sigmarsson]

and btw, why console.logs do not appear on Vercel's runtime log ?

[watsonwebdesign]

Client-side console.logs will only appear on the browser. Server-side will appear in Vercel's runtime log. So if you're logging in a client component, it will not be stored.

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community