本地主机工作正常。然而，当我使用 ngrok 作为我的
VITE_REACT_APP_BASE_URLhttphttps我在获取
/user/current我也研究了类似的问题，例如这个https://laracasts.com/discuss/channels/laravel/when-i-use-ngrok-to-load-my-laravel-app-it-only-displays-basic -html-and-no-css 和 当我使用 ngrok 加载我的 Laravel 应用程序时，它只显示基本 html 而没有 css。但我面临同样的问题，或者也许我需要配置一些东西。我使用的是 Linux，但正如我在网页中看到的那样，该端口运行良好。
// 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 });
}
},
经过一天的寻找。我从此链接找到了解决方法如何绕过 Ngrok 浏览器警告
确切的问题是我的前端无法访问确切的 api 端点，因为 ngork 默认提供一个警告页面，并且它在重定向到确切的 api 之前显示。
为了解决这个问题，我在 axios 的标题上添加了这段代码
"ngrok-skip-browser-warning": "69420",