ReactJS: ಕ್ರೋಮ್ CORS ಪ್ಲಗಿನ್ ಅನ್ನು ಸೇರಿಸಿದ ನಂತರ, ನಿಭಾಯಿಸದ ನಿರಾಕರಣೆ (ಟೈಪ್‌ಎರರ್) ತರಲು ವಿಫಲವಾಗಿದೆ

ಪ್ರತಿಕ್ರಿಯೆಯಲ್ಲಿ API ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು: CORS ಪ್ಲಗಿನ್ ಸವಾಲುಗಳು

API ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ರಿಯಾಕ್ಟ್ಜೆಎಸ್, ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಡೇಟಾ ಪಡೆಯುವಿಕೆಗೆ ಸಂಬಂಧಿಸಿದ ವಿವಿಧ ಸವಾಲುಗಳನ್ನು ಎದುರಿಸುತ್ತಾರೆ, ವಿಶೇಷವಾಗಿ ಮೂರನೇ-ಪಕ್ಷದ APIಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. ಉದ್ಭವಿಸುವ ಒಂದು ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆ ಎಂದರೆ "ಹಿಡಿಯಲಾಗದ ನಿರಾಕರಣೆ (ಟೈಪ್‌ಎರರ್): ತರಲು ವಿಫಲವಾಗಿದೆ" ದೋಷ. ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ವರ್ಧಿಸಲು ಬಳಸುವ Swiggy ನ ರೆಸ್ಟೋರೆಂಟ್ ಪಟ್ಟಿ API ನಂತಹ ಜನಪ್ರಿಯ API ಗಳನ್ನು ಬಳಸುವಾಗಲೂ ಈ ದೋಷ ಸಂಭವಿಸಬಹುದು.

ಈ ಸಂದರ್ಭದಲ್ಲಿ, CORS Chrome ವಿಸ್ತರಣೆಯನ್ನು ಸೇರಿಸುವುದು ನಿರ್ಬಂಧಿತ ಬ್ರೌಸರ್ ನೀತಿಗಳನ್ನು ಬೈಪಾಸ್ ಮಾಡಲು ಕಾರ್ಯಸಾಧ್ಯವಾದ ಪರಿಹಾರದಂತೆ ತೋರಬಹುದು. ಆದಾಗ್ಯೂ, ಇದು ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುವ ಬದಲು ಹೊಸ ತೊಡಕುಗಳನ್ನು ಪರಿಚಯಿಸಬಹುದು. ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಪರಿಸರದಲ್ಲಿ ನೀವು CORS ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಮತ್ತು ನಿಮ್ಮ API ವಿನಂತಿಗಳು ಲೋಡ್ ಆದ ಸ್ವಲ್ಪ ಸಮಯದ ನಂತರ ವಿಫಲವಾದರೆ, ಬ್ರೌಸರ್‌ನ ವಿನಂತಿ-ನಿರ್ವಹಣೆಯ ನಡವಳಿಕೆಯೊಂದಿಗೆ ಪ್ಲಗಿನ್ ಸಂಘರ್ಷಗೊಳ್ಳುವ ಸಮಸ್ಯೆಯನ್ನು ನೀವು ಎದುರಿಸುತ್ತಿರಬಹುದು.

ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವಿನಂತಿಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ದೋಷನಿವಾರಣೆ ಮಾಡುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು CORS ದೋಷಗಳು ಸುಗಮ ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಗೆ ReactJS ನಲ್ಲಿ ಅತ್ಯಗತ್ಯ. Swiggy ಯಂತಹ APIಗಳು ಅನಧಿಕೃತ ಕ್ಲೈಂಟ್‌ಗಳಿಂದ ಪ್ರವೇಶವನ್ನು ನಿಯಂತ್ರಿಸಲು CORS ನಂತಹ ಭದ್ರತಾ ಪದರಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ. ಈ ನಿರ್ಬಂಧಗಳು ಸರಿಯಾಗಿ ತಿಳಿಸಬೇಕಾದ ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.

ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, ವಿಶೇಷವಾಗಿ Chrome ನಲ್ಲಿ CORS ಪ್ಲಗಿನ್ ಅನ್ನು ಸೇರಿಸಿದ ನಂತರ ಈ ದೋಷ ಏಕೆ ಸಂಭವಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ. ನಿಮ್ಮ Swiggy API ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಅದನ್ನು ಪರಿಹರಿಸಲು ನಾವು ತಂತ್ರಗಳನ್ನು ಚರ್ಚಿಸುತ್ತೇವೆ ಪ್ರತಿಕ್ರಿಯಿಸಿ ಅಪ್ಲಿಕೇಶನ್ಗಳು.

Swiggy API ನೊಂದಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವಲ್ಲಿ CORS ಸಮಸ್ಯೆಗಳಿಗೆ ಪರಿಹಾರಗಳನ್ನು ವಿವರಿಸುವುದು

ಮೊದಲ ಪರಿಹಾರದಲ್ಲಿ, ನಾವು ಎ ರಚಿಸಿದ್ದೇವೆ Node.js Swiggy ನ API ನಿಂದ ರೆಸ್ಟೋರೆಂಟ್ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳುವಾಗ CORS ಸಮಸ್ಯೆಯನ್ನು ಬೈಪಾಸ್ ಮಾಡಲು Express ಅನ್ನು ಬಳಸುವ ಬ್ಯಾಕೆಂಡ್. ಆ ಡೊಮೇನ್ ಅನುಮತಿಸದ ಹೊರತು ಬೇರೆ ಡೊಮೇನ್‌ಗೆ ವಿನಂತಿಗಳನ್ನು ಮಾಡುವುದರಿಂದ CORS ನೀತಿಯು ಬ್ರೌಸರ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ. ಸರಳವಾದ ಸರ್ವರ್ ಅನ್ನು ರಚಿಸುವ ಮೂಲಕ, ನಾವು ಕ್ಲೈಂಟ್ ಮತ್ತು API ನಡುವಿನ ಮಧ್ಯದ ಪದರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದು, ಡೇಟಾ ಸರ್ವರ್-ಸೈಡ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳಬಹುದು ಮತ್ತು ಅದನ್ನು ರಿಯಾಕ್ಟ್ ಫ್ರಂಟ್-ಎಂಡ್‌ಗೆ ಹಿಂತಿರುಗಿಸಬಹುದು. ಈ ವಿಧಾನವು CORS ದೋಷಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ ಏಕೆಂದರೆ ವಿನಂತಿಯು ಕ್ಲೈಂಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೂಲದಿಂದ ಬಂದಿದೆ.

ಎಕ್ಸ್‌ಪ್ರೆಸ್ ಬ್ಯಾಕೆಂಡ್ ಕಸ್ಟಮ್ ಹೆಡರ್‌ಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಪ್ರವೇಶ-ನಿಯಂತ್ರಣ-ಅನುಮತಿ-ಮೂಲ, ಇದು ನಮ್ಮ ಕ್ಲೈಂಟ್ CORS ನಿರ್ಬಂಧಗಳನ್ನು ಎದುರಿಸದೆ ಸಂಪನ್ಮೂಲಗಳನ್ನು ವಿನಂತಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. Swiggy ನ API ಗೆ ಕರೆಯನ್ನು ಕರೆಯನ್ನು ಸರ್ವರ್ ಸೈಡ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಡೇಟಾವನ್ನು JSON ಸ್ವರೂಪದಲ್ಲಿ ಹಿಂತಿರುಗಿಸಲಾಗುತ್ತದೆ. API ಕೀಗಳು ಅಥವಾ ಸೂಕ್ಷ್ಮ ಮಾಹಿತಿಯನ್ನು ಮರೆಮಾಚುವುದರಿಂದ ಈ ವಿಧಾನವನ್ನು ಹೆಚ್ಚಾಗಿ ಉತ್ಪಾದನಾ ಪರಿಸರದಲ್ಲಿ ಹೆಚ್ಚು ಸುರಕ್ಷಿತ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಇದಲ್ಲದೆ, ಟ್ರೈ-ಕ್ಯಾಚ್ ಬಳಕೆಯು ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಖಾತ್ರಿಗೊಳಿಸುತ್ತದೆ, API ಪ್ರತಿಕ್ರಿಯಿಸಲು ವಿಫಲವಾದಲ್ಲಿ ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಎರಡನೇ ಪರಿಹಾರದಲ್ಲಿ, ಕ್ಲೈಂಟ್-ಸೈಡ್ ರಿಯಾಕ್ಟ್ ಕೋಡ್‌ನಲ್ಲಿ ನಾವು ಪಡೆಯುವ ವಿನಂತಿಯನ್ನು ಮಾರ್ಪಡಿಸುತ್ತೇವೆ. ಈ ವಿಧಾನವು ಕರೆಯಲ್ಲಿ ಕಸ್ಟಮ್ ಹೆಡರ್‌ಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, API ಅನ್ನು ತಲುಪುವ ಮೊದಲು ವಿನಂತಿಯನ್ನು ಸರಿಯಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ನಾವು ರಿಯಾಕ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ ಬಳಕೆಯ ಪರಿಣಾಮ ಘಟಕವನ್ನು ಆರೋಹಿಸುವಾಗ API ಕರೆಯನ್ನು ಪ್ರಚೋದಿಸಲು ಹುಕ್ ಮಾಡಿ. ಅಸಿಂಕ್ ಕಾರ್ಯವು API ಪ್ರತಿಕ್ರಿಯೆಗಾಗಿ ಕಾಯುತ್ತದೆ, ಅದನ್ನು JSON ಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ ಮತ್ತು ವಿನಂತಿಯು ವಿಫಲವಾದಲ್ಲಿ ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, API ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ಗಳಿಂದ ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವಿನಂತಿಗಳನ್ನು ಅನುಮತಿಸದಿದ್ದರೆ ಈ ಪರಿಹಾರವು ಇನ್ನೂ CORS ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸುತ್ತದೆ.

ಅಂತಿಮವಾಗಿ, ಮೂರನೇ ಪರಿಹಾರದಲ್ಲಿ, ನಾವು CORS-ಎನಿವೇರ್ ಎಂಬ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸೇವೆಯನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ಮಿಡಲ್‌ವೇರ್ ಸೇವೆಯಾಗಿದ್ದು, ಅವರ ಸರ್ವರ್ ಮೂಲಕ API ವಿನಂತಿಯನ್ನು ಮರುಹೊಂದಿಸುವ ಮೂಲಕ CORS ನಿರ್ಬಂಧಗಳನ್ನು ಬೈಪಾಸ್ ಮಾಡಲು ತಾತ್ಕಾಲಿಕವಾಗಿ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಈ ಪರಿಹಾರವು ಅಭಿವೃದ್ಧಿ ಪರಿಸರದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದಾದರೂ, ಭದ್ರತಾ ಅಪಾಯಗಳು ಮತ್ತು ಬಾಹ್ಯ ಸೇವೆಗಳ ಮೇಲಿನ ಅವಲಂಬನೆಯಿಂದಾಗಿ ಉತ್ಪಾದನೆಗೆ ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ. ಡೇಟಾ ಪಡೆಯುವ ಪ್ರಕ್ರಿಯೆಗೆ ಹೆಚ್ಚುವರಿ ಪದರವನ್ನು ಸೇರಿಸುವುದರಿಂದ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಸಹ ಪರಿಚಯಿಸುತ್ತದೆ. ಪರೀಕ್ಷಾ ಹಂತಗಳಲ್ಲಿ ಈ ವಿಧಾನವನ್ನು ಬಳಸುವುದು ಅನುಕೂಲಕರವಾಗಿರುತ್ತದೆ ಆದರೆ ಭದ್ರತಾ ಕಾರಣಗಳಿಗಾಗಿ ಉತ್ಪಾದನೆಯಲ್ಲಿ ತಪ್ಪಿಸಬೇಕು.

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = 5000;

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET');
  next();
});

app.get('/restaurants', async (req, res) => {
  try {
    const response = await fetch('https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798');
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: 'Failed to fetch restaurants' });
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

import React, { useEffect } from 'react';

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798',
        { headers: { 'Content-Type': 'application/json' } }
      );

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Fetch error:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://cors-anywhere.herokuapp.com/https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798'
      );

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error fetching restaurants:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

API ವಿನಂತಿಗಳಲ್ಲಿ CORS ಸಮಸ್ಯೆಗಳ ದೋಷನಿವಾರಣೆ

ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ "ಪಡೆಯಲು ವಿಫಲವಾಗಿದೆ" ದೋಷಕ್ಕೆ ಆಧಾರವಾಗಿರುವ ಕಾರಣಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಸ್ವಿಗ್ಗಿಯಂತಹ ಮೂರನೇ ವ್ಯಕ್ತಿಯ API ಗಳನ್ನು ಬಳಸುವಾಗ CORS (ಕ್ರಾಸ್-ಆರಿಜಿನ್ ರಿಸೋರ್ಸ್ ಹಂಚಿಕೆ) ನಿರ್ಬಂಧಗಳು. CORS ಎಂಬುದು ಭದ್ರತಾ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಅವರು ಸೇವೆ ಸಲ್ಲಿಸಿದ ಡೊಮೇನ್‌ಗಿಂತ ಬೇರೆ ಡೊಮೇನ್‌ಗೆ ವಿನಂತಿಗಳನ್ನು ಮಾಡುವುದನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, Swiggy API ವಿನಂತಿಯನ್ನು ತಿರಸ್ಕರಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಅದು ಬೇರೆ ಡೊಮೇನ್‌ನಿಂದ (ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್) ಹುಟ್ಟಿಕೊಂಡಿದೆ. ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವಿನಂತಿಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಬೆಂಬಲಿಸದ API ಗಳಿಂದ ನೀವು ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತಿರುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಸಮಸ್ಯಾತ್ಮಕವಾಗಿರುತ್ತದೆ.

"ಅನುಮತಿ CORS" Chrome ವಿಸ್ತರಣೆಯಂತಹ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳನ್ನು ಬಳಸುವುದು ಸಾಮಾನ್ಯ ಪರಿಹಾರವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಅಂತಹ ವಿಸ್ತರಣೆಗಳು ಅಸಮಂಜಸ ಫಲಿತಾಂಶಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಏಕೆಂದರೆ ಅವರು ಯಾವಾಗಲೂ API ವಿನಂತಿಗಳೊಂದಿಗೆ ಸರಿಯಾಗಿ ಸಿಂಕ್ರೊನೈಸ್ ಮಾಡದ ಬ್ರೌಸರ್ ಮಟ್ಟದ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುತ್ತಾರೆ. ಈ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಗೆ ಮಾತ್ರ ಬಳಸಬೇಕು ಮತ್ತು ಉತ್ಪಾದನಾ ಪರಿಸರದಲ್ಲಿ ಅಲ್ಲ. ಉತ್ಪಾದನೆಗಾಗಿ, ಸುರಕ್ಷಿತ ಮತ್ತು ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ ವಿಧಾನವೆಂದರೆ ಬ್ಯಾಕೆಂಡ್ ಪ್ರಾಕ್ಸಿ ಸರ್ವರ್ ಅನ್ನು ಬಳಸುವುದರಿಂದ ಅದು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪರವಾಗಿ ಡೇಟಾವನ್ನು ವಿನಂತಿಸುತ್ತದೆ, ಹಿಂದೆ ಒದಗಿಸಿದ ಪರಿಹಾರಗಳಲ್ಲಿ ನೋಡಿದಂತೆ.

ಪರಿಗಣಿಸಬೇಕಾದ ಇನ್ನೊಂದು ಅಂಶವೆಂದರೆ ದೋಷಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸುವುದು. CORS ಸಮಸ್ಯೆಗಳು "ಪಡೆಯಲು ವಿಫಲವಾಗಿದೆ" ದೋಷಗಳಿಗೆ ಸಾಮಾನ್ಯ ಕಾರಣವಾಗಿದ್ದರೂ, ನೆಟ್‌ವರ್ಕ್ ಅಸ್ಥಿರತೆ, ತಪ್ಪಾದ API URL ಗಳು ಅಥವಾ ಸರ್ವರ್ ಡೌನ್‌ಟೈಮ್‌ನಂತಹ ಇತರ ಅಂಶಗಳು ಈ ದೋಷಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಆದ್ದರಿಂದ, ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ ದೃಢವಾದ ದೋಷ ನಿರ್ವಹಣೆ ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ, ವಿಶೇಷವಾಗಿ ಮೂರನೇ ವ್ಯಕ್ತಿಯ API ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ. ಸರಿಯಾದ ದೋಷ-ನಿರ್ವಹಣೆಯ ಕಾರ್ಯವಿಧಾನವು ಸಮಸ್ಯೆಯನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಡೀಬಗ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಏನಾದರೂ ತಪ್ಪಾದಾಗ ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.