Вызов API возвращает HTML (ERR_NGROK_6024) вместо ответа JSON [Duplicate] ⇐ Javascript

[Anonymous]

Я строю небольшое React, TypeScript, Axios для зашифрованных примечаний.

• frontend : React (с Axios)
• 
  
  : node>: node>: node> http: // localhost: 3000
• туннель : ngrok (

  Код: Выделить всё

  ngrok http 3000

  )

Все работает хорошо локально, но когда я использую ngrok, некоторые запросы возвращают html-страницу от ngrok вместо ответа json из моего бэкэнда. PrettyPrint-Override ">

Код: Выделить всё

import axios from "axios";

const api = axios.create({
baseURL: "https://efaed12151ea.ngrok-free.app",
headers: {
"Content-Type": "application/json",
},
});

export type NotePayload = {
encryptedContent: string;
encryptedIv: string;
};

export type CreateNoteResponse = {
data: {
id: string;
};
};

export type GetNoteResponse = {
data: {
id: string;
encryptedContent: string;
encryptedIv: string;
};
};

export async function createNote(payload: NotePayload): Promise {
const response = await api.post("/notes", payload);
return response.data.data.id;
}

export async function getNote(id: string): Promise {
const response = await api.get(`/notes/${id}`);
console.log(response);
return response.data.data;
}

src/pages/createnote.tsx

Код: Выделить всё

import React, { useState } from "react";
import { encrypt, generateShortKey } from "../utils/crypto";
import { createNote } from "../api/notes";
import NoteForm from "../components/NoteForm";
import NoteResult from "../components/NoteResult";

export default function CreateNote() {
const [content, setContent] = useState("");
const [shortKey, setShortKey] = useState(null);
const [link, setLink] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();

if (!content.trim()) {
setError("Note content cannot be empty.");
return;
}

setError(null);
setLoading(true);

try {
const key = generateShortKey();
const { ciphertext, iv } = await encrypt(content, key);

const id = await createNote({
encryptedContent: ciphertext,
encryptedIv: iv,
});

setShortKey(key);
setLink(`${window.location.origin}/${id}#${key}`);
} catch (err: any) {
console.error("Failed to create note:", err);
setError("Failed to create note.  Please try again.");
} finally {
setLoading(false);
}
}

const handleReset = () => {
setContent("");
setShortKey(null);
setLink(null);
setError(null);
};

const copyLink = async () => {
if (link) {
try {
await navigator.clipboard.writeText(link);
alert("Link copy!");
} catch (err) {
console.error("Failed to copy link:", err);
}
}
};

return (



{link && (

)}

);
}

src/pages/viewnote.tsx (упрощенное)

Код: Выделить всё

useEffect(() => {
const shortKey = window.location.hash.slice(1);

if (!id || !shortKey) {
navigate("/404");
return;
}

const load = async () => {
try {
const { encryptedContent, encryptedIv } = await getNote(id);
const decrypted = await decrypt(encryptedContent, encryptedIv, shortKey);
setNote(decrypted);
} catch (err) {
console.error("Error fetching note:", err);
navigate("/404");
} finally {
setLoading(false);
}
};

load();
}, [id]);
< /code>
console.log(response) write fake: < /p>
{data: '\n

Подробнее здесь: [url]https://stackoverflow.com/questions/79767711/api-call-returns-html-err-ngrok-6024-instead-of-json-response[/url]