# 404 error with using http-fetch-client and AJAX

**URL:** <https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457>\
**Category:** Help Requests\
**Created:** [May 3, 2020, 3:18pm UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457 "2020-05-03T15:18:13Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 3, 2020, 3:18pm UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/1 "2020-05-03T15:18:13Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [May 3, 2020, 7:50pm UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/2 "2020-05-03T19:50:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 3, 2020, 8:16pm UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/3 "2020-05-03T20:16:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [May 3, 2020, 9:13pm UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/4 "2020-05-03T21:13:08Z")

</div>

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](http://localhost-pl)”,  
> “changeOrigin”: false  
> },  
> “/login.pl”: {  
> “target”: “[http://localhost-pl](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.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 4, 2020, 1:25am UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/5 "2020-05-04T01:25:13Z")

</div>

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

What file do these settings go into?

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [May 4, 2020, 5:30am UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/6 "2020-05-04T05:30:10Z")

</div>

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](https://webpack.js.org/configuration/dev-server/#proxy)

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [May 4, 2020, 6:38am UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/7 "2020-05-04T06:38:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 7, 2020, 4:27pm UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/8 "2020-05-07T16:27:29Z")

</div>

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:

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [May 7, 2020, 10:02pm UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/9 "2020-05-07T22:02:58Z")

</div>

See e.g. [https://stackoverflow.com/a/10636765](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.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 10, 2020, 4:56pm UTC](https://discourse.aurelia.io/t/404-error-with-using-http-fetch-client-and-ajax/3457/10 "2020-05-10T16:56:00Z")

</div>

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!