基于Grandeur Cloud开发互联网开关遇CORS拦截，求白名单配置方法

I get it—you're building an internet switch with Grandeur Cloud following a Hackster tutorial, and that CORS error is throwing a wrench in your progress. Since you've already ruled out generic CORS fixes, let's dive straight into the platform-specific solution: configuring the domain whitelist in Grandeur Cloud.

First, let's recap your scenario for context:

You're using Grandeur Cloud as your IoT BaaS backend, and when running this login code snippet, you hit a Blocked by CORS policy error:

/* @file: main.js Initialize the SDK and get a reference to the project */
var apolloProject = apollo.init("YOUR-API-KEY", "YOUR-ACCESS-KEY", "YOUR-ACCESS-TOKEN");
/* Function to login user we creating while getting started */
async function login() {
    /* Store credentials into variables */
    var email = "EMAIL";
    var password = "PASSWORD";
    /* Set the status to logging in */
    document.getElementById("status").innerText = "Logging in";
    /* Then get a reference to auth class */
    var auth = apolloProject.auth();
    /* and in a try catch block */
    try {
        /* Submit request using login function */
        var res = await auth.login(email, password);
        /* Got the response to login handle response */
        switch(res.code) {
            case "AUTH-ACCOUNT-LOGGEDIN":
            case "AUTH-ACCOUNT-ALREADY-LOGGEDIN":
                /* User Authenticated Set the status to success */
                document.getElementById("status").innerText = "User Authenticated";
                break;
            default:
                /* Logging failed due to invalid data */
                document.getElementById("status").innerText = "Authentication Failed";
        }
    } catch(err) {
        /* Error usually got generated when we are not connected to the internet */
        document.getElementById("status").innerText = "Network Error";
    }
}
/* Call login on startup */
login();

Step-by-Step to Configure Grandeur Cloud's CORS Whitelist #

1. Log into your Grandeur Cloud Dashboard

   • Head to your account and navigate to the project you're building for the internet switch. Click into the project's main dashboard.

2. Find the CORS Settings Panel

   • Look for a "Settings" tab in the left sidebar (it might be labeled "Project Settings" depending on the UI version).
   • Inside the settings page, locate the "CORS Whitelist" or "Domain Allowlist" section—this is where you control which domains are permitted to make cross-origin requests to your Grandeur API.

3. Add Your Frontend Domain

   • Click the "Add Domain" button (or similar option to create a new entry).
   • Enter the exact domain of your frontend:
     • For local development: Use http://localhost:XXXX where XXXX is your local server port (e.g., 8080, 3000—match whatever port your dev server is running on).
     • For production: Input your full deployed domain, like https://your-internet-switch-app.com.
   • Save the configuration. Note that changes might take 1-2 minutes to propagate, so don't panic if it doesn't work immediately.

4. Test the Fix

   • Restart your frontend application and run the login code again.
   • Check your browser's console—if the CORS error is gone, you're all set. If not, double-check that you entered the domain correctly (pay attention to http vs https and port numbers).

Quick Note for Development #

If you're switching between multiple local ports during development, you can temporarily add * as a wildcard to the whitelist. Only do this for development! For production, always use specific domains to avoid security risks.

内容的提问来源于stack exchange，提问作者rebootdude