رابط ال api في axios

يوجد طريقتين لتحقيق ذلك الأولى هي في الحالة العامة حيث يمكنك تعيين proxy في ملف package.json بهذه الطريقة

"proxy":"http://localhost:4000/api/"

بعدها يمكنك الاتصال بال api عبر تعيين فقط الجزء الذي يأتي بعد /api

import React, { useState, useEffect } from 'react';

export default function Logo() {
  const [data, setData] = useState();


  useEffect(() => {
    fetch('/posts').then((res) => {
      setData(res.data);
    });
  }, []);

  return (
    <div>
      {data &&
        data.map((d) => (
          <div>
            <img src={data.image} alt="image" />
            <h1>{data.tilte}</h1>
            <p>{data.body}</p>
          </div>
        ))}
    </div>
  );
}

وهناك الطريقة الثانية وهي خاصة بالاعدادات فمثلا في axios يمكنك أن تعين الاعدادت ومن ضمن الاعدادات المتوفرة هناك الرابط القاعدي

axiosConfig.js

import axios from 'axios';

const instance = axios.create({
    baseURL: 'http://localhost:4000/api/'
});

export default instance;

يمكنك استيراد axios من الملف الذي في الاعلى وسيكون متوفر لديه رابط قاعدي ويمكنك استخدام فقط الجزء الذي يأتي بعد /api في اتصالاتك بالسيرفر

import React, { useState, useEffect } from 'react';
import axios from './axiosConfig';

export default function Logo() {
  const [data, setData] = useState();

  useEffect(() => {
    axio.get('/posts').then((res) => {
      setData(res.data);
    });
  }, []);
 

  return (
    <div>
      {data &&
        data.map((d) => (
          <div>
            <img src={data.image} alt="image" />
            <h1>{data.tilte}</h1>
            <p>{data.body}</p>
          </div>
        ))}
    </div>
  );
}