ReactJS - طلب API جانب الخادم البسيط

0

إنني أقوم بتقديم طلب واجهة برمجة تطبيقات axios.get بسيط جدًا في ReactJS ، جانب العميل. ومع ذلك ، يتم حظره بواسطة CORS في متصفحي. لذلك لا يتم إرجاع أي بيانات.

أفهم أنني بحاجة إلى تقديم هذا الطلب من جانب الخادم ، لكنني لست متأكدًا من كيفية إعادة هيكلة الكود الخاص بي أدناه ، (ليتم كتابتي من جانب الخادم).

أي نصائح حول كيفية إعادة كتابة هذا الرمز ، سيكون موضع تقدير كبير!

شكر،

  // MAKE JOB API REQUEST
  componentDidMount() {
    console.log('COMPONENT DID MOUNT');
    axios.get('https://jobs.github.com/positions.json?search=')

      .then(res => {
        console.log('jobs', res.data.slice(0, 9));

        this.setState(
          { jobs: res.data.slice(0, 9) }
        );
      });
  }

1 إجابة

0

كما هو موضح في التعليقات ، تحتاج إلى إنشاء مسار لذلك واستخدام الوكيل للتعامل مع الطلبات. إليك الخطوات:

webpack.config.js

devServer: {
    contentBase: ['src'],
    watchContentBase: true,
    historyApiFallback: true,
    hot: true,
    inline: true,
    port: 8000,
    open: true,
    proxy: {
      '/api/*': {
        target: 'http://localhost:4000/',
        secure: false
      }
    }
  },

index.js

const axios = require( "axios" );

...skipped codes

app.get( "/api/jobs", ( req, res ) => {
  axios.get( `https://jobs.github.com/positions.json?search=${ req.query.job }` )
    .then( result => res.send( result.data ) );
} );

عليك أن تطلب axios في هذا الملف كما ترى.

app.js

handleSubmit = ( e ) => {
    e.preventDefault();
    const { searchData } = this.state;

    axios.get( `/api/jobs?job=${ searchData }` )
      .then( res => this.setState( { jobs: res.data } ) );
}

لم يكن هناك componentDidMount في الكود الخاص بك لذلك اعتدت handleSubmit . مع هذا الإعداد كلما تقدمت بطلب /api/something يعيد التوجيه إلى خادم Express الخاص بك. لذا ، على الواجهة الأمامية التي ستستخدمها /api وسوف تضيف المسارات المطلوبة لإعداد Express الخاص بك.

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام