0

I am working on building an Internet Switch with Grandeur Cloud and following the tutorial on hackster. I am running the example provided but it is giving me Blocked by CORS policy error. The code snipped is attached as below

/*
    @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();

What I am possibly doing wrong?

The screenshot of error

Note: I have reviewed the suggestions given, but it is not about the generic CORS error. It is a platform specific question. Grandeur Cloud is a BaaS platform for IoT and I am using it as backend for my app and hardware. So you can whitelist the allowed domain but I don't know how to do that.

rebootdude
  • 11
  • 2
  • Does this answer your question? [Deadly CORS when http://localhost is the origin](https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin) – mplungjan Jul 30 '20 at 12:11
  • https://medium.com/swlh/avoiding-cors-errors-on-localhost-in-2020-5a656ed8cefa – mplungjan Jul 30 '20 at 12:14
  • Hey, thanks for commenting. I reviewed your suggestion and comment, but it is not about the CORS error in general. I am using Grandeur Cloud which a BaaS platform for IoT. I am using it as backend for my app and hardware. They allow you to whitelist allowed domain but I don't know how to configure it. Can you please reopen the question? – rebootdude Jul 30 '20 at 12:22
  • You need to not run on localhost but on an allowed domain – mplungjan Jul 30 '20 at 12:23
  • But in the tagged tutorial, the writer has tested the app on localhost. It is possible I guess, you are just required to configure some settings (which I clearly don't know how to). – rebootdude Jul 30 '20 at 12:26
  • 2
    [RTM](https://github.com/grandeurtech/grandeurcloud-js-sdk#authentication-and-access) _In the end, it is important to note it comes with CORS protection in it by default. So to start communicating with the cloud platform, simply visit [settings page](https://cloud.grandeur.tech/settings) at cloud dashboard and whitelist the domain that your web app is using (if you are testing it locally and haven't deployed it to a domain yet, just add localhost:[port] to the allowed domains list but don't forget to remove it from a list before shipping you app in production)._ – mplungjan Jul 30 '20 at 12:31
  • Thanks for helping. I should have looked at the docs more carefully. – rebootdude Jul 30 '20 at 12:37
  • Feel free to delete this – mplungjan Jul 30 '20 at 12:39
  • What about leaving it? Like others can get into same error? As you have probably noticed that it's not well documented ATM. What would you suggest? – rebootdude Jul 30 '20 at 12:40
  • 1
    It is VERY well documented - you just had to scroll down 2 more paragraphs further than the video you looked at, but by all means. – mplungjan Jul 30 '20 at 12:51
  • This is a Javascript issue and has nothing to do with the ESP8266. – romkey Jul 30 '20 at 14:49

1 Answers1

0

I have looked at the resources that you tagged. Probably you are missing a step. You are required to add the localhost or the domain from which you are sending the request to whitelist. Here is how you can do it (ref. getting started tutorial)

  1. Go to settings page
  2. From the Project details section, click on the Update Allowed Domains
  3. Add the domain (with http or https prefixed) and press enter
  4. Then click on update button and you will be able to send request

I would encourage you to go through the docs for more info.

Moiz Husnain
  • 50
  • 11