Блог

Главная - Вопросы по программированию - Показывает ошибку 404 после размещения веб-приложения в react js

Показывает ошибку 404 после размещения веб-приложения в react js

#reactjs

#reactjs

Вопрос:

Я создал веб-приложение для блога, используя react Js, оно отлично работает в моей локальной системе, но после его размещения оно показывает код состояния 404. Я использовал поддельный пакет json-сервера для запуска в моей локальной системе, но после размещения его на github он не извлекает данные из файла json. Это веб-приложение https://manishya1669.github.io/BlogWebApp / и это код для Blogdetails, и для большей наглядности вы можете увидеть весь исходный код на https://github.com/manishya1669/BlogWebApp

 import { useHistory, useParams } from "react-router-dom";
import useFetch from "./useFetch";

const BlogDetails = () => {
    const {id} = useParams();
    const {data:blog, error,isPending} = useFetch('http://localhost:8000/blogs/'   id);
    const history = useHistory();

    const handleClick = () => {
        fetch('http://localhost:8000/blogs/'   blog.id, {
          method: 'DELETE'
        }).then(() => {
          history.push('/');
        }) 
      }
    return ( 
          <div className= "blog-details">
             
             {isPending amp;amp; <div> Loading</div> }
             {error amp;amp; <div>{error}</div>}
             { blog amp;amp;(
                 <article>
                     <h2>
                         {blog.title}
                     </h2>
                     <p> Written by {blog.author}</p>
                     <div>{blog.body}</div>
                     <button onClick={handleClick}>Delete</button>
                 </article>
            )
                   
             }
          </div>   );
}
export default BlogDetails;

  

**Hope this is enough to make my self clear and  appreciating those who are willing to help**

Комментарии:

1. Опубликуйте ошибки на своей консоли в этой теме.

2. Ваша сборка завершилась неудачно, сославшись на отсутствие /docs папки в вашей ветке gh-pages.

3. какую версию react вы используете в этом приложении react?

Ответ №1:

Я нашел его решение, оно не выполнялось Cors policy , потому что я запускал всю свою клиентскую часть на порту № 3000 и пытался получить данные с порта 8000, поэтому из-за двух разных портов рассматривалось два разных веб-сайта, где один пытается получить данные с другого, и этот веб-сайт не был безопасным. Итак, чтобы справиться с этим, вам нужно добавить proxy сервер в свой package.json , например

 "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",

Также необходимо заменить fetch('http://localhost:8000/blogs/' blog.id,

с fetch('/blogs/' blog.id, 

 
const handleClick = () => {
        fetch(/'blogs'/  blog.id, {
          method: 'DELETE'
        }).then(() => {
          history.push('/');
        }) 
      }

Если вы обнаружите какую-либо ошибку, пожалуйста, дайте мне знать, это поможет мне узнать больше.

Метки: