Discussion on "How to Deploy a FullStack NodeJs and Express App on Vercel"

Vinyl Davyl · 2023-06-05T17:13:51.819Z

Hello there, Welcome back to my page. Whether you're a returning visitor or visiting for the first time, Voila! I'm more than thrilled to have you here. Recently, I completed a full-stack project named "Talku-Talku". Although after sharing it with my...

It's an awesome and very helpfull article.

Hi, and thanks for this awesome article.

I have this MERN app I've deployed to Vercel (my GitHub username is DragonOsman. Please go to my GitHub page and go to the personal-library repo; the deployment link is on the right-hand panel). I setup CORS and a proxy (proxy key in client directory package.json that points to the server URL), and the paths and methods are all correct as far as I can see, but I still get a 405 error when I try to send a POST request to my login route.

Source code repository is on my personal-library repository (DragonOsman/personal-library). Any help is appreciated. [I have to describe like this because I can't post links yet.] Thanks.

Edit: I removed proxy and only kept CORS, which I'm doing like this:

const CLIENT_URL = "<client_url>";

app.use(cors({
  origin: [`${CLIENT_URL}`, `${CLIENT_URL}/`],
  methods: ["GET", "PUT", "POST", "DELETE"],
  credentials: true
}));

but I still have a CORS error in my browser's console that says:

Access to fetch at '<backend_login_url>' from origin '<client_url>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I added res.setHeader("Access-Control-Allow-Origin", [CLIENT_URL,${CLIENT_URL}/]); on all my routes, right at the start of the function code block, and I also added app.options("*", cors()); (tried it both before and after my app.use(cors({...})) call). But that error won't go away. What should I do?

Okay, Hi DragonOsman,

I understand the frustration you're facing with the CORS issue in your MERN app deployed on Vercel. It's great that you've taken steps to set up CORS and proxy settings to allow communication between your frontend and backend.

Sorry for replying this late. But I would try and help as much as I can.

First, make sure that your CORS configuration is correct in both your server and client code. It seems like you've defined the CLIENT_URL and added it to the origin field in your app.use(cors(...)) middleware, which is correct. Yeah, but However, the issue might lie in how the headers are being set and how preflight requests are being handled.

I suggest to resolve this issue you check your Server Headers: Make sure that your server is actually sending the Access-Control-Allow-Origin header with the correct value (CLIENT_URL). It should be sent as a response header when the server receives an OPTIONS request.

Also Check the Handle Preflight Requests: The app.options("*", cors()); line is correct, and it should come before the app.use(cors({...})) middleware. This handles preflight requests, which are used to check the server's CORS policy before making the actual request. Ensure that this setup is in place.

Check, CORS Configuration too Osman. Verify that there are no typos or syntax errors in your CORS configuration. Double-check the URLs and ensure they match your frontend and backend URLs. And even the deployed ones. If you have them deployed on vercel already.

Check your Vercel Configurations and Network Tab Debugging: Check if Vercel has any specific CORS settings that you need to configure. Some hosting platforms have their own CORS configurations that can affect your app. Use your browser's developer tools to inspect the network requests. Check the request and response headers to ensure that the expected CORS headers are present.

This might help, Remember, CORS issues can be tricky, but with careful debugging and attention to detail, you'll likely find a solution. Best of luck, and I hope your app's functionality will be up and running smoothly soon! 🚀 cheers.

Thanks, Glad you liked it

Wow, Thanks alot I'm guessing the vercel.json is quite important for the backend deploy

Yeah!! Glad you liked this. Yeah! really really important. more or less like a corner stone👉👈

My pleasure, glad you like

My pleasure! Happy you liked this

Discussion

How to Deploy a FullStack NodeJs and Express App on Vercel

Responses(8)

Recent in Forum

Search Hashnode

How to Deploy a FullStack NodeJs and Express App on Vercel

Responses(8)

Recent in Forum