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