DEV Community

Nathan Loyer
Nathan Loyer

Posted on

Can't get Axios requests to PHP API

Not sure where to start here. I have inherited a Laravel 7.4/ Vue 2.x application. Everyone who knew how to start it up (in theory: successfully) is long gone. I've got everything up and listening without errors until you try to do anything. It's supposed to be setup with the Laravel app listening for /api calls. And in the Vue app an Api object is created by Axios.

The problem I am struggling with is that all requests to this Api return with a 401 Unauthorized. But the PHP server isn't even getting a request.

import axios from "axios";

let baseURL = "";

switch (process.env.NODE_ENV) {
    case "development":
        baseURL = window.location.protocol + "//" + window.location.hostname + "/api";
        break;

    default:
        baseURL = window.location.protocol + "//" + window.location.hostname + "/api";
}

axios.defaults.withCredentials = true;

const Api = axios.create({
    baseURL,
    withCredentials: true
});

export default Api;
Enter fullscreen mode Exit fullscreen mode

I'm using all the sanctum csrf stuff to manage the token and I'm not getting CSRF errors anymore after fixing the config in .env. Now all I get are 401s, and they are coming from Nginx. Any ideas? I've been stuck on this for days and don't know where to go next.

Oldest comments (1)

Collapse
 
aarone4 profile image
Aaron Reese

Which http verb are you using?
Can you output the base and URL endpoint values and get a response from the browser and/or Postman?
401 sounds like it might be a CORS issue.
I don't think the problem is in Vue, like you said more likely to be the webserver.
Are you running Vue or ngix on localhost/127.0.0.0 or with a proper IP address