Node Backend Vue (Vite) Frontend, Axios request CORS Error

Question

I know this issue had been discussed a lot on Stackoverflow but unfortunately I just couldn't find a way to make it work. Long story short, I am building an API using Node JS to that makes a request to MailChimp, and I am calling this API on the client side Vue JS app with Vite. The API works fine with Postman, but it returns Access to XMLHttpRequest at from origin 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 error.

Here is the index js file on the server:

const cors = require('cors')
app.use(cors({ origin: '*' }))
app.use('/v1/crm/leads', require('./src/routes/LeadRoutes'))

Here is my controller method

await addSubscriberToAudience('xxx', req.body.email).then(async (mailchimpID) => {
  if (mailchimpID) {
    let data = {
      references: {
        mailchimpID: mailchimpID
      }
    }
    let updatedLead = await Lead.findByIdAndUpdate(lead.id, data, { new: true })
    res.status(200).json({ data: updatedLead, message: 'New Lead Created Successfully' })
  } else {
    console.log('Null Mailchimp ID')
  }
})

Here is how I call it from the frontend:

axios.post(APIURL + '/v1/crm/leads/create', data, {
        headers: { 'X-ORIGIN': 'https://example.com' }
      }).then((response) => {
        console.log(response)
      }).catch((error) => {
        console.log(error.message)
      })

I can see Access Allow Origin is set in the response header in the preflight response:

Backend is hosted on AWS Elastic Beanstalk and frontend is hosted on AWS S3 Bucket Any help is needed please, and thank you!

Edit 1: I am making other POST API calls from the website to my backend server, they all work fine. Only this one is not working, and the difference is that, after I make the call from client side to the server, server calls Mailchimp API, and then waiting on response from Mailchimp API before return a success response to my frontend, hope this context helps

Are you sure it's that specific request that is failing? Because the result of your OPTIONS request clearly contains the ACAO header ... — derpirscher, Aug 29 '22 at 13:55
What if you remove the headers from the axios request? Besides that, also try removing the option object from your CORS middleware. — code, Sep 02 '22 at 21:34

score 0 · Answer 1 · answered Aug 24 '22 at 18:22

0

Wich browser are you using? Apparently on Chrome the wildcard * does't match the localhost url. There is a ppost here on stackoverflow about this:

Why does my http://localhost CORS origin not work?

And here is the documentation about chrome:

Chromium Doc

answered Aug 24 '22 at 18:22

GSFZamai

64
6

I am using google chrrome, but even when I deployed the vue app to the server and makes the request, it is still the same error. – Jacky.S Aug 24 '22 at 18:24
and it's the same error even when I tried in Safari with localhost – Jacky.S Aug 24 '22 at 18:29
try this ```axios.post(APIURL + '/v1/crm/leads/create', {}, { headers: { 'X-ORIGIN': 'https://example.com' } }).then((response) => { console.log(response) }).catch((error) => { console.log(error.message) })``` – DMantas Aug 25 '22 at 15:10

score 0 · Answer 2 · answered Aug 29 '22 at 22:41

If you are perfectly sure this CORS errors only occurs on a single POST endpoint (other POSTs work); then this is usually caused by a simple error in the endpoint Controller.

What I think happens is app.use(responseMiddleware) adds the responseMiddleware actually to the successful responses, but not for failure responses (eg. 500 s).

I believe Chrome is lying, and CORS header was actually found in the OPTION response, but not in the actual POST response.

Node Backend Vue (Vite) Frontend, Axios request CORS Error

2 Answers2