Как перехватить данные JSON во внешнем РЕАКТЕ. JS, которые поступают по НЕКОТОРЫМ УДАЛЕННЫМ URL (www.example.com) или с какого-либо сервера

Question

Я знал, что мы можем получить данные из некоторого API в React. но как получить JSON напрямую к веб-интерфейсу от других удаленных веб-серверов, например, Пример: -

1. с сайта example1.com я публикую некоторые json на example2.com
2. exaple2.com построен в REACT. JS, я не хочу получать JSON в бэкэнде.
3. Вместо этого я хочу получить Реагирование внешнего интерфейса данных. js

Ребята, я не знаю, что сделал правильно. Я совершенно новичок в React, если глупая ошибка есть, значит исправьте меня, ребята. Спасибо

Пример: - Что я пробовал

Это файл React, работающий на http://localhost: 5000 , который ожидает данные от http://localhost: 3003 /

import React,{ Component } from "react";
import axios from 'axios'
class PostList extends Component{
    constructor(props) {
        super(props)
        this.state={
            posts: []
        }
    }

    componentDidMount() {
        axios.get('__dirname+http://localhost:3003/',{ 'headers' : { 'Access-Control-Allow-Origin' : '*'}})
            .then(response => {
                console.log(JSON.stringify(response))
            })
            .catch(error => {
                console.log(error)
            })
    }


    render() {
        return (
            <div>
                List of posts
            </div>
        )
    }

}
export default PostList

Это еще один сервер, работающий на http://localhost: 3003 / , который отправляет данные в http://localhost: 5000 /

const express = require('express')
const cors=require('cors')
const app = express()
app.use(cors())
const port = 3003
app.post('/', function(req, res){
  res.setHeader('Access-Control-Allow-Origin', '*');

  console.log(req.body);
  request.post(
    {
    url:'http://localhost:5000/',
    json: {
      unit_name:"hi",
      unit_price:"bye"
        },
    headers: {
        'Content-Type': 'application/json'
    }
    },
  function(error, response, body){
    console.log(body);
    res.send(body);
  });
})
app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

В настоящее время я получаю ошибку

xhr.js:178__dirname+http://localhost:3003 404 (Not Found)
PostList.js:17 Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

Ожидается, что мне нужно напечатать * 107 6 * in http://localhost: 5000 / , что есть в http://localhost: 3003 /

Большое спасибо, ребята, ваша помощь очень много значит

Answer 1

Первое, что я вижу, не углубляясь в код, это то, что вы отправляете запрос GET, но на сервере у вас нет маршрутизатора для этого. У вас есть только принятие POST-запроса. В этой строке:

app.post('/', function(req, res){...}

Попробуйте изменить или добавить другой маршрут для GET:

app.get('/', function(req, res){...}