Failed to log in TypeError: NetworkError when attempting to fetch resource (CORS?)

I’m using http://localhost:8000 for local development with the Realm SDK. Some research indicated the title error above may be CORS related so I input http://localhost:8000 in Allowed Request Origins in Realm App Services | App Settings, but it hasn’t made a difference and I continue to get the same problem.

What else can I try to get past this error?
Should I try the ‘hosting’ option provided and continue my development via Realm App Services (this would involve uploading every change I make, adding overhead)?
thanks …

p.s. I can, of course, add the relevant .html .js here code if that would be helpful(?) …

SOLVED. I was getting network errors that may/may not have been directly CORS related as a result of trying different solutions to getting a simple login page working. The async code suggested by mongodb was close but didn’t work with a submit button the way I expected/required without some important tweaks. This is what I needed on the index.html page:

<div id="loginDiv" style="color:rgb(39, 93, 4); text-align: center">
      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" id="email" required><br>
      <br>
      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" id="psw" required><br>
      <br>
      <input type="button" value="Login" onclick="login()"/><br>
      <br>
      <input type="button" value="Register" onclick="register()"/><br>
      <br>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label><br>
    </div>

and this is what I needed in a separate authenticate.js file:

// Add your App ID
const realmapp = new Realm.App({ id: "<app id>" });

async function loginEmailPassword(email, password) {
  const credentials = Realm.Credentials.emailPassword(email, password);
    try {
      // Authenticate the user
      const user = await realmapp.logIn(credentials);
      // `App.currentUser` updates to match the logged in user - only logs in console if false
      console.assert(user.id === realmapp.currentUser.id);
      // HIDE login
      document.getElementById("loginDiv").style.display = "none";

      // HIDE previous error messages
      document.getElementById("authError").style.display = "none";
   
      // SHOW Elm app
      document.getElementById("elmappDiv").style.display = "block";
      return user;
    } catch (err) {
      console.error("Failed to log in", err);
      // Still show login
      document.getElementById("loginDiv").style.display = "block";

      // Show error
      document.getElementById("authError").innerHTML = '<br>' + "Authentication error. " + '<br>' + "Please register or try again.";
      document.getElementById("authError").style.color = "rgb(225, 22, 11)";

      document.getElementById("authError").style.display = "block";
   
      // HIDE Elm app
      document.getElementById("elmappDiv").style.display = "none";
    }
  }

  function login () {

    // Get input values
    const email = document.getElementById("email").value;
    const password = document.getElementById("psw").value;

    //invoke loginEmailPassword from authentication.js to login to mongodb realm
    (async function() {
      const user = await loginEmailPassword(email, password);
        console.log("Successfully logged in!", user.id);
    })();
  }

I did something similar for registration (password re-set still remains to be done).

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.