How to resolve CORS ERROR In React-Vite Application with Lumen API

49 Views Asked by At

I have a React deployment that consumes an API from a PHP Lumen deployment. Both of them are deployed with the Digital Ocean App Platform. CORS has been enabled in the Lumen deployment so I am able to make requests to some of the API routes. There are two different routes that accept some parameters via a post request and then send an email based on the parameters they receive. The mail engine used is Postmark. Whenever I make a request to those URLs I get back a CORS error. This doesn't happen with the other routes or URLS except those that send the email.

These are the functions that I call in one of the components to make a post request.

export const sendPaymentEmail = async(card_code, name, amount) =>{
    const instance = axios.create(
        {
            baseURL:'https://mwdomain.com/api/',
            headers:{
                "Content-type": "application/json"
            },
            withCredentials: true
        }
    )
    return await instance.post(`sendTopupEmail/?card_code=${card_code}&name=${name}&amount=${amount}`).then(
        response => response
    )
}

export const sendPaymentValidationEmail = async(card_code, name, url) =>{
    const instance = axios.create(
        {
            baseURL:'https://mwdomain.com/api/',
            headers:{
                "Content-type": "application/json"
            },
        }
    )
    return await instance.post(`sendTopupConfirmationLink/?card_code=${card_code}&name=${name}&url=${url}`).then(
        response => response
    )
}

This is how I am using it

const sendTopUpEmail = (card_code, subscribername, amount) => {
        try {
            sendPaymentEmail(card_code, subscribername, amount).then(
                response => {
                    console.log(response)
                }
            )
        } catch (error) {
            console.log(error)
        }
    }

And the errors I get

Access to XMLHttpRequest at 'https://mwdomain.com/api/sendTopupEmail/?card_code=2&name='Nate'&amount=1' from origin 'https://mwdomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index-c92ba9c7.js:217 
        
        
        POST https://mwdomain.com/api/sendTopupEmail/?card_code=2&name='Nate&amount=1 net::ERR_FAILED 301 (Moved Permanently)

I have tried using a proxy in my vite.config file but that doesn't solve the error.

server: {
    proxy: {
      '/API': {
        target: 'https://mwdomain.com',
        changeOrigin: true,
        secure: false,
        ws:true,
        
      },
      '/eapi': {
        target: 'https://mwdomain.com/api/',
          changeOrigin: true,
          secure: false,
          agent: new http.Agent()
    },
    }
  },

How I am using the proxy

export const sendPaymentValidationEmail = async(card_code, name, url) =>{
    const instance = axios.create(
        {
            baseURL:'/eapi',
            headers:{
                "Content-type": "application/json"
            },
        }
    )
    return await instance.post(`/sendTopupConfirmationLink/?card_code=${card_code}&name=${name}&url=${url}`).then(
        response => response
    )
}

I have tried SEVERAL fixes but to no avail. Any help is very much appreciated

0

There are 0 best solutions below