Ответ Axios возвращает блок кода HTML при использовании ngrok вместо localhost (реакция)

Локалхост работает. Тем не менее, я получил ответ с блоком кода html, когда использовал ngrok в качестве моего VITE_REACT_APP_BASE_URL. Я пытался использовать http и https ссылки ngrok, но получил тот же ответ.

Я получил такой ответ, когда получил маршрут /user/current. Я использую zustand в качестве управления состоянием.

Я также изучаю подобные проблемы, такие как эта 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.info("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.info("Unexpected response structure");
        set({ loading: false });
      }

      return response.data;
    } catch (error) {
      console.info(error);
      // toast.error("An error occurred while fetching user data");
      // const errors = error.response.data.message.error;
      // console.info(errors);
      // for (const field in errors) {
      //   errors[field].forEach((errorMessage) => {
      //     toast.error(`${errorMessage}`);
      //   });
      // }
      set({ loading: false });
    }
  },

reactjs laravel axios ngrok

26.04.2024 13:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

311

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

После дня поисков. Я нашел обходной путь по этой ссылке Как обойти предупреждение браузера Ngrok

Точная проблема заключалась в том, что мой интерфейс не мог получить доступ к точной конечной точке API, поскольку по умолчанию ngork предоставляет страницу с предупреждением, и она отображается перед перенаправлением на конкретный API.

Чтобы решить эту проблему, я добавил этот код "ngrok-skip-browser-warning": "69420", в заголовки своих аксиомов.

27.04.2024 03:12

Другие вопросы по теме

Круговые отношения на диаграмме классов UML

Как правильно отображать текущие данные с помощью нумерации страниц в laravel?

Neo4j - после перезапуска службы на сервере график не найден

Контроллер не может получить доступ к идентификатору модели, несмотря на правильную настройку. Я использую Laravel 10 для этого REST API

Laravel Eloquent: получение данных, соответствующих условию

Сохранение многих моделей в foreach слишком медленно

Как сохранить значение текстовой области в том виде, в каком оно есть в контроллере Laravel?

Laravel 11 странный неопределенный ключ массива «имя» при отправке электронной почты

Загрузка данных многочастной формы Nuxt 3 не работает

Как вернуть форму ошибки из laravel в приложение inertiajs/vue3?

Ответ Axios возвращает блок кода HTML при использовании ngrok вместо localhost (реакция)

Ответы 1

Другие вопросы по теме

Похожие вопросы