The localhost works. Yet I got a response with html block of code when using ngrok as my VITE_REACT_APP_BASE_URL. I tried to use the http and https of the ngrok link and yet I got still the same response.
I got that response when getting the route of /user/current. I use zustand as my state management.
I also look into similar problems such as this https://laracasts.com/discuss/channels/laravel/when-i-use-ngrok-to-load-my-laravel-app-it-only-displays-basic-html-and-no-css and When I use ngrok to load my Laravel app , it only displays basic html and no css. Yet I face the same issue or maybe I need to configure something. I'm on linux, yet the port works well as I see it into the webpage.
// response of the `user/current` route. added line breaks
Object { data: '<!
DOCTYPE html>\n<html class="h-full" lang="en-US" dir="ltr">\n <head>\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/euclid-square/EuclidSquare-Regular-WebS.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/euclid-square/EuclidSquare-RegularItalic-WebS.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/euclid-square/EuclidSquare-Medium-WebS.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/euclid-square/EuclidSquare-Semibold-WebS.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/euclid-square/EuclidSquare-MediumItalic-WebS.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/ibm-plex-mono/IBMPlexMono-Text.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/ibm-plex-mono/IBMPlexMono-TextItalic.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <link rel="preload" href="https://cdn.
ngrok.
com/static/fonts/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.
woff" as="font" type="font/woff" crossorigin="anonymous" />\n <meta charset="utf-8">\n <meta name="author" content="ngrok">\n <meta name="description" content="ngrok is the fastest way to put anything on the internet with a single command.
">\n <meta name="robots" content="noindex, nofollow">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link id="style" rel="stylesheet" href="https://cdn.
ngrok.
com/static/css/error.
css">\n <noscript>You are about to visit d4f1-103-62-153-180.
ngrok-free.
app, served by 103.
62.
153.
180.
This website is served for free through ngrok.
com.
You should only visit this website if you trust whoever sent the link to you.
(ERR_NGROK_6024)</noscript>\n <script id="script" src="https://cdn.
ngrok.
com/static/js/error.
js"
// Axios config
import axios from "axios";
const AxiosInstance = axios.create({
// baseURL: "http://127.0.0.1:8000/api",
baseURL: import.meta.env.VITE_REACT_APP_BASE_URL + "/api",
headers: {
"Content-type": "application/json",
Accept: "application/json",
},
});
AxiosInstance.interceptors.request.use((config) => {
const token = localStorage.getItem("token");
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export default AxiosInstance;
getUser: async () => {
set({ loading: true });
try {
const response = await AxiosInstance.get("/user/current");
console.log("test ", response);
if (response.data && response.data.data) {
const { data } = response.data;
const userStatus = data.is_activated;
set({
currentUser: userStatus ? data : null,
userStatus,
userFirstName: data.first_name,
userEmail: data.email,
userRole: data.role,
loading: false,
});
} else {
console.log("Unexpected response structure");
set({ loading: false });
}
return response.data;
} catch (error) {
console.log(error);
// toast.error("An error occurred while fetching user data");
// const errors = error.response.data.message.error;
// console.log(errors);
// for (const field in errors) {
// errors[field].forEach((errorMessage) => {
// toast.error(`${errorMessage}`);
// });
// }
set({ loading: false });
}
},
After a day of searching. I found a workaround from this link How to Bypass Ngrok Browser Warning
The exact issue was that my front-end can't access the exact api endpoint because there's a warning page provided by ngork by default and it shows before redirecting on the exact api.
To resolve, I added this code "ngrok-skip-browser-warning": "69420", on the headers of my axios.