Integrating Aurelia frontend with ExpressJS API

Backend
1

Hey everyone! I’m working on a new project for my job and I’m a bit rusty with web dev. I’m using Aurelia for the frontend (on localhost:9000) and ExpressJS for the backend API (on localhost:8000). There’s also a PostGreSQL database on AWS.

I’m having trouble getting my Aurelia frontend to talk to my ExpressJS backend. Here’s what I’ve tried:

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(HttpClient)
export class UserAuth {
  constructor(httpClient) {
    this.client = httpClient;
  }

  authenticate() {
    const endpoint = 'http://localhost:8000/api/users/verify';

    this.client
      .get(endpoint)
      .then(response => {
        console.log('Success:', response);
      })
      .catch(err => {
        console.error('Failed:', err);
      });
  }
}

This always hits the catch block with a ‘ProgressEvent’ error. But if I put the URL in my browser, I get a proper JSON response. It seems to work fine for stuff on localhost:9000, but not for anything else. What am I doing wrong? Any help would be awesome!

2

hey there! have you checked if CORS is enabled on your express server? sometimes browsers block requests to different ports for security reasons. try adding this to ur express app:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

let me know if that helps or if u need more info!

3

heya Haz_45Write! zack’s onto smthn with CORS, but also check ur aurelia config. make sure ur using aurelia-fetch-client instead of http-client for cross-origin requests. it handles CORS better. try swapping that out n see if it helps. good luck with ur project!

4

I’ve encountered similar issues before. One thing to consider is that your browser’s security settings might be blocking the cross-origin request. Have you tried using a CORS browser extension to temporarily disable these restrictions for testing purposes? This can help isolate whether it’s a server-side or client-side issue.

Also, ensure your Express server is properly configured to handle OPTIONS requests, which are sent as preflight checks for CORS. You might need to add specific headers and handle OPTIONS requests explicitly in your Express routes.

Lastly, double-check your network tab in the browser’s developer tools. It might provide more detailed error information that could point you in the right direction for troubleshooting.