तो axios का उपयोग करके, मैं अपने एक्सप्रेस सर्वर से अनुरोध करने का प्रयास कर रहा हूं, यहां मेरा Axios अनुरोध है:

/* @flow */

import type {
  Dispatch,
  GetState,
  ThunkAction,
  Reducer,
} from '../../types';

export const USERS_INVALID = 'USERS_INVALID';
export const USERS_REQUESTING = 'USERS_REQUESTING';
export const USERS_FAILURE = 'USERS_FAILURE';
export const USERS_SUCCESS = 'USERS_SUCCESS';

export const API_URL = '/api/articleList';

// Export this for unit testing more easily
export const fetchUsers = (axios: any, URL: string = API_URL): ThunkAction =>
  (dispatch: Dispatch) => {
    dispatch({ type: USERS_REQUESTING });

    return axios.get(URL)
      .then((res) => {
        dispatch({ type: USERS_SUCCESS, data: res.data });
      })
      .catch((err) => {
        dispatch({ type: USERS_FAILURE, err });
      });
  };

// Preventing dobule fetching data
/* istanbul ignore next */
const shouldFetchUsers = (state: Reducer): boolean => {
  // In development, we will allow action dispatching
  // or your reducer hot reloading won't updated on the view
  if (__DEV__) return true;

  const userListFetch = state.userListFetch;

  if (userListFetch.readyStatus === USERS_SUCCESS) return false; // Preventing double fetching data

  return true;
};

/* istanbul ignore next */
export const fetchUsersIfNeeded = (): ThunkAction =>
  (dispatch: Dispatch, getState: GetState, axios: any) => {
    /* istanbul ignore next */
    if (shouldFetchUsers(getState())) {
      /* istanbul ignore next */
      return dispatch(fetchUsers(axios));
    }

    /* istanbul ignore next */
    return null;
  };

और यहाँ एक्सप्रेस सर्वर पर मेरा कोड है:

//GET ARTICLES
app.get('/api/articleList', (req, res) => { 
  console.log('hello');
});

यह "हैलो" लॉग नहीं करता है और यह कोई त्रुटि प्रदर्शित नहीं करता है, मुझे लगता है कि एक्सियोस के लिए मेरे सर्वर तक पहुंचने के लिए मुझे कुछ याद आ रहा है ...

मेरे पास किसी अन्य ऐप पर कुछ ऐसा ही काम कर रहा था लेकिन इसे यहां लागू नहीं किया जा सकता है, मैंने ऑनलाइन खोज की है और समाधान नहीं मिल रहा है, किसी भी मदद या सलाह की सराहना की जाती है - अग्रिम धन्यवाद!

नोट: जब "API_URL" वैरिएबल होता है तो Axios अनुरोध ठीक काम करता है एक myjson url लिंक पर सेट करें, इसलिए मुझे पता है कि मेरी क्रिया ठीक काम करती है, मुझे बस लगता है जैसे मुझे अपने सर्वर तक पहुंचने के लिए कुछ याद आ रहा है

संपादित करें: कृपया मेरा पूरा सर्वर देखें।

/* @flow */

import path from 'path';
import morgan from 'morgan';
import express from 'express';
import compression from 'compression';
import helmet from 'helmet';
import hpp from 'hpp';
import favicon from 'serve-favicon';
import React from 'react';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { matchRoutes } from 'react-router-config';
import { Provider } from 'react-redux';
import chalk from 'chalk';

import createHistory from 'history/createMemoryHistory';
import configureStore from './redux/store';
import Html from './utils/Html';
import App from './containers/App';
import routes from './routes';
import { port, host } from './config';

const app = express();

// Using helmet to secure Express with various HTTP headers
app.use(helmet());
// Prevent HTTP parameter pollution.
app.use(hpp());
// Compress all requests
app.use(compression());

// Use morgan for http request debug (only show error)
app.use(morgan('dev', { skip: (req, res) => res.statusCode < 400 }));
app.use(favicon(path.join(process.cwd(), './build/public/favicon.ico')));
app.use(express.static(path.join(process.cwd(), './build/public')));

// Run express as webpack dev server
if (__DEV__) {
  const webpack = require('webpack');
  const webpackConfig = require('../tools/webpack/webpack.client.babel');

  const compiler = webpack(webpackConfig);

  app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    hot: true,
    noInfo: true,
    stats: 'minimal',
  }));

  app.use(require('webpack-hot-middleware')(compiler));
}

// Register server-side rendering middleware
app.get('*', (req, res) => {
  if (__DEV__) webpackIsomorphicTools.refresh();

  const history = createHistory();
  const store = configureStore(history);
  const renderHtml = (store, htmlContent) => {  // eslint-disable-line no-shadow
    const html = renderToStaticMarkup(<Html store={store} htmlContent={htmlContent} />);

    return `<!doctype html>${html}`;
  };

  // If __DISABLE_SSR__ = true, disable server side rendering
  if (__DISABLE_SSR__) {
    res.send(renderHtml(store));
    return;
  }

  // Load data on server-side
  const loadBranchData = () => {
    const branch = matchRoutes(routes, req.url);

    const promises = branch.map(({ route, match }) => {
      // Dispatch the action(s) through the loadData method of "./routes.js"
      if (route.loadData) return route.loadData(store.dispatch, match.params);

      return Promise.resolve(null);
    });

    return Promise.all(promises);
  };

  // Send response after all the action(s) are dispathed
  loadBranchData()
    .then(() => {
      // Setup React-Router server-side rendering
      const routerContext = {};
      const htmlContent = renderToString(
        <Provider store={store}>
          <StaticRouter location={req.url} context={routerContext}>
            <App />
          </StaticRouter>
        </Provider>,
      );

      // Check if the render result contains a redirect, if so we need to set
      // the specific status and redirect header and end the response
      if (routerContext.url) {
        res.status(301).setHeader('Location', routerContext.url);
        res.end();

        return;
      }

      // Checking is page is 404
      const status = routerContext.status === '404' ? 404 : 200;

      // Pass the route and initial state into html template
      res.status(status).send(renderHtml(store, htmlContent));
    })
    .catch((err) => {
      res.status(404).send('Not Found :(');

      console.error(`==> 😭  Rendering routes error: ${err}`);
    });
});



//----------------------------------------------------

//GET ARTICLES
app.get('/api/articleList', (req, res) => {

  console.log('yoyoyo');
    var indexLimit = parseInt(req.query.indexLimit, 10);
    var articleId = req.query.articleId
    var articles = [];

    db.collection('articles')
        .find()
        .sort("dateAdded", -1)
        .limit(indexLimit)
        .toArray()
        .then(result => {
            articles = articles.concat(result);
        }).then(() => {
            res.send(articles);
        }).catch(e => {
            console.error(e);
        });
});


//------------------------------------


//connect to mongo db
var db
const MongoClient = require('mongodb').MongoClient
MongoClient.connect('mongodb://##CHANGED###:test@ds123930.mlab.com:###/###', (err, database) => {
    if (err) return console.log(err);
    db = database
    console.log('db connected');
})



if (port) {
  app.listen(port, host, (err) => {
    if (err) console.error(`==> 😭  OMG!!! ${err}`);

    console.info(chalk.green(`==> 🌎  Listening at http://${host}:${port}`));
    // Open Chrome
    require('../tools/openBrowser').default(port);
  });
} else {
  console.error(chalk.red('==> 😭  OMG!!! No PORT environment variable has been specified'));
}
0
djmcr 19 जुलाई 2017, 19:10
Chrome Developer Console का नेटवर्क टैब क्या दिखाता है ? क्या वहां कोई नेटवर्क गतिविधि है?
 – 
Mukesh Sharma
19 जुलाई 2017, 19:16
तो क्या आप अपने ब्राउज़र कंसोल में प्रतिक्रिया देखने की उम्मीद कर रहे हैं? आप एक्सप्रेस सर्वर ब्राउज़र को प्रतिसाद नहीं दे रहे हैं क्योंकि आप कोई प्रतिक्रिया नहीं भेज रहे हैं। जब वह एपीआई एंडपॉइंट मारा जाता है तो वह अनुरोध खुला रहता है। यदि आप अपने सर्वर कंसोल को देख रहे हैं, और अपने सर्वर कंसोल में हैलो लॉग नहीं देख रहे हैं, तो आप सही समापन बिंदु का उपयोग नहीं कर रहे हैं। Axios कॉल ठीक दिखता है।
 – 
Kyle Richardson
19 जुलाई 2017, 19:21
मैं इसे कंसोल लॉग करने की उम्मीद कर रहा था। लॉग ('हैलो'); मेरी कमांड लाइन में, लेकिन ऐसा लगता है कि यह @ केली रिचर्डसन नहीं है
 – 
djmcr
19 जुलाई 2017, 19:23
मुझे कैसे पता चलेगा कि मुझे किस समापन बिंदु का उपयोग करना चाहिए? @ काइल रिचर्डसन
 – 
djmcr
19 जुलाई 2017, 19:24
मुझे आपका और सर्वर देखना होगा और सुनिश्चित करने के लिए आपके मार्ग कैसे सेट किए गए हैं, लेकिन मुझे लगता है कि आपके पास कहीं app.use('/api', routesApi); जैसा कुछ हो सकता है और आपको /api को /api से ड्रॉप करने की आवश्यकता हो सकती है। /api/articleList उस मार्ग पर, इसे बदलकर app.get('/articleList', ( req, req) => ... कर दिया गया है
 – 
Kyle Richardson
19 जुलाई 2017, 19:47

1 उत्तर

सबसे बढ़िया उत्तर

आपको अपने /api मार्ग ऊपर ले जाने होंगे:

app.get('*', (req, res) => {
    ...
}

/api/articleList पर आपका कॉल हिट हो रहा है जो '*' के सभी रूट हैंडलर को पकड़ रहा है और प्रस्तुत पृष्ठ के साथ अनुरोध का जवाब दे रहा है। डेटा के लिए अपने एपीआई के साथ संचार करते समय, आप एक पृष्ठ प्रस्तुत नहीं करना चाहते हैं, आप एपीआई से प्रतिक्रिया चाहते हैं :)

मिडलवेयर को ऊपर से नीचे तक दिखने के क्रम में निष्पादित किया जाता है।

2
Kyle Richardson 21 जिंदा 2018, 23:30