I've been dealing with a CORS issue for quite some time now. I've tried all the solutions on Stack Overflow, but nothing seems to be working for me. Can anyone help me figure out what's wrong with my code? I'm using VUE JS 3 and trying to access an API hosted on a different server. Despite trying various headers, none of them have helped me resolve the issue.
ENV URL
VITE_APP_API_URL="http://localhost:5173"
The vue.config.js file is located in the root folder:
module.exports = {
devServer: {
proxy: 'https://ded.austory.it'
}
}
Here's how I'm calling the API:
function login(credentials: User) {
// ApiService.setCrossHeaders();
return ApiService.post("/login", credentials)
.then(({ data }) => {
setAuth(data);
})
.catch(({ response }) => {
setError(response.data.errors);
});
}
Definition of the API Service:
.......
import type { AxiosResponse } from "axios";
import axios from "axios";
import VueAxios from "vue-axios";
.....
/**
* @description set the POST HTTP request
* @param resource: string
* @param params: AxiosRequestConfig
* @returns Promise<AxiosResponse>
*/
public static post(resource: string, params: any): Promise<AxiosResponse> {
return ApiService.vueInstance.axios.post(`${resource}`, params);
}
The above code handles the API calls, but I still can't figure out what's causing the issue. The current output is
https://i.sstatic.net/kff0Sab8.png
When I change the ENV variable to:
https://i.sstatic.net/AJWLp6Q8.png
https://i.sstatic.net/oTiQwMrA.png
Interestingly, when setting the ENV URL to:
VITE_APP_API_URL="https://preview.keenthemes.com/metronic8/laravel/api"
the CORS error disappears. How is this possible when there are no other references to this URL in my project?