404 error with using http-fetch-client and AJAX

Help Requests
1

I am trying to make a login using AJAX and the http-fetch-client.

My directory tree is:

src/
login.html
login.js
login.pl

My code for login.js is:

import {HttpClient, json} from 'aurelia-fetch-client';
//import { responseTypeTransformer } from 'aurelia-http-client';

let httpClient = new HttpClient();

export class Login {
    constructor() {

        httpClient.configure(config => {
            config
              .withBaseUrl('./')
              .withDefaults({
                credentials: 'same-origin',
                headers: {
                  'Accept': 'application/json',
                  'X-Requested-With': 'Fetch'
                }
              })
          });
          
        
        this.loginResponse = null;
        this.login();
    }

    heading = 'Login';

    username    = '';
    password = '';

    login() {
            
        if ( this.username && this.password )
        {
            var params = '?username=' + this.username + '&password=' + this.password;
            var url = 'login.pl' + params;
        
            var response = httpClient.fetch(url);

            console.log( response );
        }
    }
}

The error I get is 404 - cannot find login.pl. The url the error gives is http://[ip address]:8080/login.pl, which is correct.

I have tried the following:

BaseUrl: /
BaseUrl: src/
BaseUrl: ./

They are all returning the 404 error.

I feel like I am missing something in how the project looks for files? It finds all the other files just fine, just not the login.pl.

Thanks for all your help.

1 Like
2

What bundler are you using? The pl file might simply not be served eg by Webpack without a proper config of the devserver

2 Likes
3

I am using all the default settings on an Aurelia project, so webpack is what I’m using.

How can I configure this environment to work properly?

I did try going to http://[localhost ip]:8080/login.pl, and I get a GET error, cannot get login.pl.

So it has to be something with how the system is looking for files?

Any insights are appreciated.

1 Like
4

I agree with @zewa666. Localhost:8080 is served by the webpack server, so only requests to the webpack server can be handled this way.
In our project we have a php backend, but that’s running on a separate (nginx) server instance, and on another port. For that we added a proxy in the aurelia-project settings, adapted to your details:

“devServer”: {
“historyApiFallback”: {
“index”: “/”
},
“proxy”: {
“/backend”: {
“target”: “http://localhost-pl”,
“changeOrigin”: false
},
“/login.pl”: {
“target”: “http://localhost-pl”,
“changeOrigin”: false
}
}
},

So you would need to have a perl server running on localhost-pl:80 to let it work with these settings. But I would guess as a direction this would suffice.

Good luck! And please let us know if you were successful!

One sidenote, since the requests are handled as XHR requests, the handling might be having some problems if you use https within webpack (since the other host is non-https). In the browser you can solve this by setting the #allowed-insecure-localhost in the chrome://flags . That’s simply because the self-signed certificate we use is flagged as insecure.

2 Likes
5

Thank you for this idea. I will be implementing it in the morning.

What file do these settings go into?

6

You should find a webpack config file in the root of your project. In there if there isn’t a top-level prop devServer just add one. Additionally with regards to the mentioned https issue, for each entry add secure: false. That should take care of it

There are also other config options which you can find here in the proxy section. https://webpack.js.org/configuration/dev-server/#proxy

2 Likes
7

A yes! We added it to aurelia.json, but indeed, that’s an addition to the regular webpack settings, so it can be added there as well.

2 Likes
8

I tried the settings, and added them to aurelia.json in the aurelia_project directory.

I am also using the aurelia-fetch-client as follows:

import {HttpClient, json} from 'aurelia-fetch-client';


let httpClient = new HttpClient();

export class Login {
    constructor() {

        httpClient.configure(config => {
            config
              .withBaseUrl('http://[perl ip address]/ajax/')
              .withDefaults({
                headers: {
                  'Accept': 'application/json',
                  'Access-Control-Allow-Origin':  'http://[perl ip address]/ajax',
                  'Access-Control-Allow-Methods': 'GET'
                }
              })
          });
          
        
        this.loginResponse = null;
        this.login();
    }

    heading = 'Login';

    username    = '';
    password = '';

    login() {
            
        if ( this.username && this.password )
        {
            var params = '?username=' + this.username + '&password=' + this.password;
            var url = 'login.pl' + params;
        
            var response = httpClient.fetch(url);

            console.log( response );
        }
    }
}

I am getting the following error in the browser’s console:

Access to fetch at 'http://[perl ip address]/ajax/login.pl?username=rss&password=veer%peek' from origin 'http://[aurelia ip]:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

I adjusted my headers as you can see above to accept cross origin endpoints, I think?

But I am not sure why I am getting this error, or how to fix it.

1 Like
9

See e.g. https://stackoverflow.com/a/10636765
You have added the response headers to the request. It’s the (login.pl) response that should add these headers. According to the article, the request headers are send automatically.

2 Likes
10

I was able to get it working with a proxy server, and some $.ajax calls.

I ended up using ajax, because I needed to set more headers and other variables, and I was having trouble getting the data back from the httpClient - it was always null.

Anyway, thanks for all the help!

2 Likes