Send credential cookies with aurelia-fetch-client

Help Requests
1

Im using the aurelia-fetch-client to call a login.php script. I send the username und password with post method. It should also send the PHPSESSID cookie. But no cookies will be sent. If the PHPSESSID cookie is not sent to the server, he can’t remember the user and will always start a new session. So I don’t know if the user is alredy logged in.

This is the code I’m using:

let httpClient = new HttpClient();
        httpClient.configure(cfg => {
            cfg
                .useStandardConfiguration()   
                .withBaseUrl(`${this.config.baseUrl}/login.php`)
                .withDefaults({
                    //credentials: 'include',
                    headers: {
                        'Accept-Language': this.i18n.getLocale(),
                        //'Content-Type': 'application/x-www-form-urlencoded',
                        //'Access-Control-Allow-Credentials': true
                    }
                });
        });

        let formData = new FormData();
        formData.append('username', this.username);
        formData.append('password', this.password);

        httpClient.fetch('', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.code !== 200) {
                this.showInvalidAlert(data.error);
                this.loggedIn=false;
            } else {
                this.loggedIn=true;
                window.localStorage.setItem("loggedIn", this.username);
                this.router.navigateToRoute('admin_fk',{username: this.username});
            //this.showSuccessMessage();
            }
        });

The JS File and the PHP File are not on the same origin. Could this be a problem?

1 Like
2

If they are not the same origin that’s definitely an issue if you haven’t configured cors.

I don’t know about the server, but from the client you at least need to add mode: 'cors' to the request init, e.g:

httpClient.fetch('', {
    method: 'POST',
    body: formData,
    mode: 'cors'
})

If that doesn’t work, check the server and/or browser network logs to see if there are any errors related to the preflight request. If the server is hardened you’ll need to make sure that the correct methods, headers, etc are permitted. Easiest to start off with a simple “allow-all” cors policy on the server though.

1 Like
3

Why do you have this commented out? It is required for fetch to send cookies.

2 Likes