Fatal编程技术网
  • node.js/
  • Node.js 尝试获取资源时出现网络错误

Node.js 尝试获取资源时出现网络错误

node.js reactjs api express

Node.js 尝试获取资源时出现网络错误,node.js,reactjs,api,express,general-network-error,Node.js,Reactjs,Api,Express,General Network Error,我使用React作为前端，Nodejs和express作为后端，当我的应用程序尝试进行API调用时，我出现了这个错误，在本地环境中，它可以完美地工作，但在生产环境中无法工作 我在控制台中有这个： 跨源请求被阻止：同一源策略不允许读取远程资源http://localhost:5000/badges. （原因：CORS请求未成功）。 fron end code api.js const BASE_URL = 'http://localhost:5000'; const delay = ms =

我使用React作为前端，Nodejs和express作为后端，当我的应用程序尝试进行API调用时，我出现了这个错误，在本地环境中，它可以完美地工作，但在生产环境中无法工作

我在控制台中有这个：

跨源请求被阻止：同一源策略不允许读取远程资源http://localhost:5000/badges. （原因：CORS请求未成功）。

fron end code api.js

const BASE_URL = 'http://localhost:5000';

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const randomNumber = (min = 0, max = 1) =>
  Math.floor(Math.random() * (max - min + 1)) + min;
const simulateNetworkLatency = (min = 30, max = 1500) =>
  delay(randomNumber(min, max));

async function callApi(endpoint, options = {}) {
  await simulateNetworkLatency();

  options.headers = {
    'Content-Type': 'application/json',
    Accept: 'application/json'
  };

  const url = BASE_URL + endpoint;
  const response = await fetch(url, options);
  const data = await response.json();

  return data;
}

const api = {
  badges: {
    list() {
      // throw new Error('500 server Error'); // esto ocurre cuando hay un error con la api
      // return []; // este seria el caso en donde llega la peticion vacia
      return callApi('/badges'); // esta es la llamada exitosa a la api, entregando todos los datos
    },
    create(badge) {
      // throw new Error('500: Server error');
      return callApi(`/badges`, {
        method: 'POST',
        body: JSON.stringify(badge)
      });
    },
    read(badgeId) {
      return callApi(`/badges/${badgeId}`);
    },
    update(badgeId, updates) {
      return callApi(`/badges/${badgeId}`, {
        method: 'PUT',
        body: JSON.stringify(updates)
      });
    },
    // Lo hubiera llamado `delete`, pero `delete` es un keyword en JavaScript asi que no es buena idea :P
    remove(badgeId) {
      return callApi(`/badges/${badgeId}`, {
        method: 'DELETE'
      });
    }
  }
};

export default api;
React-Component-Badges.js

import React from 'react';
import './styles/Badges.css';
import confLogo from '../images/badge-header.svg';
import BadgesList from '../components/BadgesList';
import { Link } from 'react-router-dom';
import api from '../api';
import PageLoading from '../components/PageLoading';
import PageError from '../components/PageError';
import MiniLoader from '../components/MiniLoader';

class Badges extends React.Component {
  state = {
    loading: true,
    error: null,
    data: undefined
  };

  componentDidMount() {
    this.fetchData();

    this.intervalId = setInterval(this.fetchData, 5000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  fetchData = async () => {
    this.setState({ loading: true, error: null });

    try {
      const data = await api.badges.list();
      this.setState({ loading: false, data: data }); // si todo sale bien se entrega la data en pantalla
    } catch (error) {
      this.setState({ loading: false, error: error }); // de esta forma se maneja el error
    }
  };



  render() {
    if (this.state.loading === true && !this.state.data) {
      return <PageLoading />;
    }

    if (this.state.error) {
      return <PageError error={this.state.error} />;
    } // si llegase a ocurrir un error este es el mensaje que se mostraria en pantalla
    return (
      <React.Fragment>
        <div className="Badges">
          <div className="Badges__hero">
            <div className="Badges__container">
              <img
                className="Badges_conf-logo"
                src={confLogo}
                alt="Conf logo"
              />
            </div>
          </div>
        </div>
        <div className="Badges__container">
          <div className="Badges__buttons">
            <Link to="/badges/new" className="btn btn-primary">
              New badge
            </Link>
          </div>
          <div className="Badge__list">
            <BadgesList badges={this.state.data} />

            {this.state.loading && <MiniLoader />}
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Badges;


const fs = require('fs');
const path = require('path');
const faker = require('faker');
const md5 = require('md5');

function createBadges(limit = 50) {
  const result = [];

  for (let i = 0; i < limit; i++) {
    const firstName = faker.name.firstName();
    const lastName = faker.name.lastName();
    const email = faker.internet.email();

    result.push({
      id: faker.random.uuid(),
      firstName,
      lastName,
      email,
      jobTitle: faker.name.jobTitle(),
      twitter: `${firstName}${lastName}${faker.address.zipCode()}`,
      avatarUrl: `https://www.gravatar.com/avatar/${md5(email)}?d=identicon`,
    });
  }

  return result;
}

function main() {
  const data = {
    badges: createBadges(),
  };

  fs.writeFileSync(
    path.resolve(__dirname, 'db.json'),
    JSON.stringify(data, null, 4)
  );
}

main();


从“React”导入React；
导入“./styles/Badges.css”；
从“../images/badge header.svg”导入confLogo；
从“../components/BadgesList”导入徽章列表；
从'react router dom'导入{Link}；
从“../api”导入api；
从“../components/PageLoading”导入页面加载；
从“../components/PageError”导入PageError；
从“../components/MiniLoader”导入MiniLoader；
类标记扩展了React.Component{
状态={
加载：对，
错误：null，
数据：未定义
};
componentDidMount（）{
这是fetchData（）；
this.intervalId=setInterval（this.fetchData，5000）；
}
组件将卸载（）{
clearInterval（此为有效期）；
}
fetchData=async（）=>{
this.setState（{loading:true，error:null}）；
试一试{
const data=wait api.badges.list（）；
this.setState（{loading:false，data:data}）；///si todo sale bien se entrega la data en pantalla
}捕获（错误）{
this.setState（{loading:false，error:error}）；//desta forma se maneja el error
}
};
render（）{
if（this.state.load===true&&！this.state.data）{
返回；
}
if（this.state.error）{
返回；
}//这是一个眼睛的错误，因为它是一个眼睛
返回(
新徽章
{this.state.loading&&}
);
}
}
导出默认徽章；
服务器端Seed.js

import React from 'react';
import './styles/Badges.css';
import confLogo from '../images/badge-header.svg';
import BadgesList from '../components/BadgesList';
import { Link } from 'react-router-dom';
import api from '../api';
import PageLoading from '../components/PageLoading';
import PageError from '../components/PageError';
import MiniLoader from '../components/MiniLoader';

class Badges extends React.Component {
  state = {
    loading: true,
    error: null,
    data: undefined
  };

  componentDidMount() {
    this.fetchData();

    this.intervalId = setInterval(this.fetchData, 5000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  fetchData = async () => {
    this.setState({ loading: true, error: null });

    try {
      const data = await api.badges.list();
      this.setState({ loading: false, data: data }); // si todo sale bien se entrega la data en pantalla
    } catch (error) {
      this.setState({ loading: false, error: error }); // de esta forma se maneja el error
    }
  };



  render() {
    if (this.state.loading === true && !this.state.data) {
      return <PageLoading />;
    }

    if (this.state.error) {
      return <PageError error={this.state.error} />;
    } // si llegase a ocurrir un error este es el mensaje que se mostraria en pantalla
    return (
      <React.Fragment>
        <div className="Badges">
          <div className="Badges__hero">
            <div className="Badges__container">
              <img
                className="Badges_conf-logo"
                src={confLogo}
                alt="Conf logo"
              />
            </div>
          </div>
        </div>
        <div className="Badges__container">
          <div className="Badges__buttons">
            <Link to="/badges/new" className="btn btn-primary">
              New badge
            </Link>
          </div>
          <div className="Badge__list">
            <BadgesList badges={this.state.data} />

            {this.state.loading && <MiniLoader />}
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Badges;


const fs = require('fs');
const path = require('path');
const faker = require('faker');
const md5 = require('md5');

function createBadges(limit = 50) {
  const result = [];

  for (let i = 0; i < limit; i++) {
    const firstName = faker.name.firstName();
    const lastName = faker.name.lastName();
    const email = faker.internet.email();

    result.push({
      id: faker.random.uuid(),
      firstName,
      lastName,
      email,
      jobTitle: faker.name.jobTitle(),
      twitter: `${firstName}${lastName}${faker.address.zipCode()}`,
      avatarUrl: `https://www.gravatar.com/avatar/${md5(email)}?d=identicon`,
    });
  }

  return result;
}

function main() {
  const data = {
    badges: createBadges(),
  };

  fs.writeFileSync(
    path.resolve(__dirname, 'db.json'),
    JSON.stringify(data, null, 4)
  );
}

main();


const fs=require（'fs'）；
const path=require（'path'）；
const faker=要求（“伪造者”）；
const md5=需要（'md5'）；
函数createBadges（限制=50）{
常量结果=[]；
for（设i=0；i

请使用npm包cors。这将解决问题。我正在尝试，但还不起作用。请更具体地说，我发现这可能会导致：尝试访问具有无效证书的https资源将导致此错误//尝试从具有https源的页面访问http资源也将导致此错误。//从Firefox68开始，https页面是不允许访问的，尽管这可能会因为Bug 1488740而改变//服务器没有响应实际请求（即使它响应了飞行前请求）。一种情况可能是正在开发的HTTP服务在没有返回任何数据的情况下惊慌失措。