How to allow cross origin in API?

[rembo]

Hello.. I am testing a local flutter App via API, But i got this error response :

Access to XMLHttpRequest at 'https://mysite.com/project/api/posts/list' from origin 'http://localhost:62867' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Am try to allow the site 'localhost' to the origin control to the API response like :
Access-Control-Allow-Origin: http://localhost:62867

how i can to add the local site to Access-Control-Allow-Origin ?
Thanx..

[arbei]

1. If the List page of the "posts" table requires user level permissions, make sure you login through the API first and get the JWT token. When you sent request to /api/posts/list, you need to send the JWT in HTTP header, read Authenticate User with JWT (JSON Web Token).
2. The error said "Response to preflight request", when you send request to List page, you should use HTTP GET, not HTTP POST.
3. Check the API controller and make sure "OPTIONS" is allowed for your requests.
4. If your web server sends the Access-Control-Allow-Methods, make sure it allow OPTIONS.

[phatneglo]

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?

---

[arbei]

JWT token is for authentication, not related to CORS. For CORS issue, you may try API custom headers, note that it is for IIS/Apache only.