I am trying to do a GET request in order to retrieve some images from my Cloudinary account. But when I run the server, I get a 400 status code on my UI with reading

Cannot GET /

How can I solve this issue?

const express = require('express');
const dotenv = require('dotenv');
const cors = require('cors');
const { json } = require('body-parser');
const axios = require('axios');


const app = express();

app.use(cors());
app.use(json());

const { parsed: config } = dotenv.config();

const BASE_URL = `https://api.cloudinary.com/v1_1/${config.CLOUD_NAME}/resources/image`;

const auth = {
    username: config.API_KEY,
    password: config.API_SECRET,
};

app.get('/photos', async(req, res) => {
    const response = await axios.get(BASE_URL   '/resources/image', {
        auth,
        params: {
            next_cursor: req.query.next_cursor,
        },
    });
    return res.send(response.data);
});

app.get('/search', async (req, res) => {
    const response = await axios.get(BASE_URL   '/resources/search', {
        auth,
        params: {
            expression: req.query.expression,
        },
  });
  
    return res.send(response.data);
});


const PORT = 7000;

app.listen(PORT, console.log(`Server running on port ${PORT}`));

CodePudding user response：

If you open your server URL in browser you will get Cannot GET / because you don't have base route.

It's not needed in most cases, since you don't access your node server from browser, it just run's in the background.

You generally display your frontend (Angular, React) in browser.

But if you don't like the message you can add a base route.

app.get('/', (req, res) => res.send('Hello World'));

I'm not sure what are you trying to achieve, but at least you won't get this error.

CodePudding user response：

This Is the React frontend app.js. I am trying to retrieve some images from my cloud the render them in my UI using react. I keep getting the 400 status

import React, { useState, useEffect } from 'react';
import { getImages, searchImages } from './api';
import './App.css';
import { HeaderNav } from './component/HeaderNav';
import { Navbar } from './component/Navbar';

const App = () => {
    const [imageList, setImageList] = useState([]);
    const [nextCursor, setNextCursor] = useState(null);
    const [searchValue, setSearchValue] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            const responseJson = await getImages();
            setImageList(responseJson.resources);
            setNextCursor(responseJson.next_cursor);
        };

        fetchData();
    }, []);

    const handleLoadMoreButtonClick = async () => {
        const responseJson = await getImages(nextCursor);
        setImageList((currentImageList) => [
            ...currentImageList,
            ...responseJson.resources,
        ]);
        setNextCursor(responseJson.next_cursor);
    };

    const handleFormSubmit = async (event) => {
        event.preventDefault();

        const responseJson = await searchImages(searchValue, nextCursor);
        setImageList(responseJson.resources);
        setNextCursor(responseJson.next_cursor);
    };

    const resetForm = async () => {
        const responseJson = await getImages();
        setImageList(responseJson.resources);
        setNextCursor(responseJson.next_cursor);

        setSearchValue('');
    };

    return (
        <>
    <HeaderNav />
        <Navbar />
            <form className='search-form' onSubmit={handleFormSubmit}>
                <input
                    value={searchValue}
                    onChange={(event) => setSearchValue(event.target.value)}
                    required='required'
                    placeholder='Enter a search value...'
                ></input>
                <button type='submit'>Search</button>
                <button type='button' onClick={resetForm}>
                    Clear
                </button>
            </form>
            <div className='image-grid'>
                {imageList.map((image) => <img src={image.url} alt={image.public_id}>

        </img> )}
            </div>
            <div className='footer'>
                {nextCursor && (
                    <button onClick={handleLoadMoreButtonClick}>Load More</button>
                )}
            </div>
        </>
    );
};

export default App;