Main Problem: CORS Issue Despite Configuration
I am attempting to utilize the API in my Vue 3 application, using Axios for HTTP requests. Here is the script I'm currently using:
// boot/axios.js
import { boot } from "quasar/wrappers";
import axios from "axios";
import { Cookies } from "quasar";
const api = axios.create({ baseURL: "http://localhost/eassist/mng" });
api.interceptors.request.use(
function (config) {
const token = Cookies.get("jwt_token");
if (token) {
config.headers["X-Authorization"] = `Bearer ${token}`; // Aligning with the documentation
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
export default boot(({ app }) => {
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$api = api;
});
export { api };
// services/assistantService.js
import { api } from "boot/axios";
export const fetchAssistants = async (options = {}) => {
try {
const response = await api.get("/api/list/assistants", { params: options });
return response.data;
} catch (error) {
console.error("Error fetching assistants:", error);
throw error;
}
};
However, when I attempt to call fetchAssistants
, I encounter an error in my browser:
Access to XMLHttpRequest at 'http://localhost/eassist/mng/api/list/assistants' from origin 'http://localhost:9001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I have ensured that I followed the documentation correctly, passing the JWT obtained from /api/login
. Despite this, I keep encountering the aforementioned error, as depicted in the attached screenshot.
Note: The PHPMaker backend runs on port 80, and my development environment is running at localhost:9090.
When I build the app, suspecting a CORS issue, it works fine, indicating that my code is correct. However, for development purposes, I need a way to ensure that I can test my work by calling your API without encountering CORS errors.
Could you please provide a temporary workaround for this issue?