Enable CORS for External Script and API Integration

[0xadamm]

Unable to properly test the sign-in functionality from the dev environment due to a CORS issue

• We are experiencing a Cross-Origin Resource Sharing (CORS) issue with our external script hosted at https://tronix-homepage-html.vercel.app/public/js/auth.js.

• This script is making API calls that are being blocked by CORS policies, preventing it from functioning correctly.

[0xadamm]

I'm getting an error when running this in the browser because my base url is not the same as the api

when I deploy on the vercel I can't use this because it is an external file

[0xadamm]

I have tried to create this sign-in function using promises and asynchronously neither is returning a response with helpful data.

Promises Code

const signIn = (email, password) => {
  // log user in beginning
  console.log("User Login in progress....");
  fetch(`${signInUrl}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({ email, password }),
  }).then((res) => {
    if (res.status === 200) {
      console.log("User Login successful");
    } else {
      console.log("User Login failed");
      res.json().then((errorData) => {
        console.log("Error Message: ", errorData);
      });
    }
  });
};

Promises Errors

Asynchronous Code

const signIn = async (email, password) => {
  // log user in beginning
  console.log("User Login in progress....");

  try {
    const response = await fetch(`${signInUrl}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({ email, password }),
    });

    if (response.status === 200) {
      // log user in successful
      console.log("User Login successful");
    } else {
      // handle non-200 status codes
      console.error(`Login failed with status: ${response.status}`);
      const errorData = await response.json();
      console.error("Error message:", errorData.message);
    }
  } catch (error) {
    // handle network or other errors
    console.error("Network or server error:", error);
  }
};

[0xadamm]

• Ideally, the solution is to configure the server to include the appropriate CORS headers.

• This allows the browser to handle the request correctly without needing to disable CORS.

[0xadamm]

Potential Solution

To resolve CORS issues, the server needs to include the appropriate headers in its response to indicate that it allows requests from different origins. The appropriate CORS headers could include:

1. Access-Control-Allow-Origin: Specifies the origin that is allowed to access the resource. Use * to allow any origin, or specify a specific origin (e.g., https://example.com).
2. Access-Control-Allow-Methods: Specifies the methods that are allowed when accessing the resource (e.g., GET, POST, PUT, DELETE).
3. Access-Control-Allow-Headers: Specifies the headers that are allowed in the request (e.g., Content-Type, Authorization).
4. Access-Control-Allow-Credentials: Indicates whether the response to the request can be exposed when the credentials flag is true. (Optional)
5. Access-Control-Max-Age: Indicates how long the results of a preflight request can be cached. (Optional)

[0xadamm]

The server-side API needs to be configured to expose the necessary headers to the client. Specifically, you need to use the Access-Control-Expose-Headers header to expose the Set-Cookie headers so they can be accessed by the client-side JavaScript.

[0xadamm]

CORS-safelisted response header

Only the CORS-safelisted response headers are exposed by default.

For the client side to be able to access other headers, the server must list them using Access-Control-Expose-Headers.