GET http : // localhost : 3000 / api / products 404 (찾을 수 없음) 오류가 발생합니다.

Question

글쎄,이 오류에 대해 StackOverflow에 많은 질문이 있습니다. 모두가 나를 위해 작동하지 않는 것을 보았습니다. 일부 제품을 가져 오려고 redux와 반응을 사용하고 있습니다. 내 백엔드 서버 노드는 포트 5000에서 실행 중이며 프런트 엔드가 실행중인 포트 3000을 사용하여 데이터를 가져올 때마다 동시에 두 서버를 시작하는 데 사용하고 있습니다. 누군가이 문제를 해결하도록 도와주세요.

package.json 파일

{
  "name": "proshop",
  "version": "1.0.0",
  "description": "MERN application named proshop",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node backend/server",
    "server": "nodemon backend/server",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "data:import": "node backend/seeder",
    "data:destroy": "node backend/seeder -d"
  },
  "keywords": [
    "NodeJS",
    "ExpressJs",
    "React",
    "Redux",
    "MongoDb"
  ],
  "author": "Narayan Maity",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "colors": "^1.4.0",
    "concurrently": "^5.3.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-async-handler": "^1.1.4",
    "mongoose": "^5.10.9"
  },
  "devDependencies": {
    "nodemon": "^2.0.6"
  }
}

다음은 내 productsAction.js 파일입니다.

import axios from 'axios';
import {
  PRODUCT_LIST_FAIL,
  PRODUCT_LIST_REQUEST,
  PRODUCT_LIST_SUCCESS,
} from '../constants/productConstants';

export const listProducts = () => async (dispatch) => {
  try {
    dispatch({ type: PRODUCT_LIST_REQUEST });

    const { data } = await axios.get('http://localhost:5000/api/products');

    dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
  } catch (error) {
    dispatch({
      type: PRODUCT_LIST_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

HTTP : // localhost : 5000 / api / products와 같은 전체 주소를 사용하면 CORS 오류가 발생합니다.

Answer 1

그것은 훨씬 더 쉬울 및 것입니다 focus당신이 추가하면 "proxy": "http://localhost:5000"당신의 client또는 react과 같이 프로젝트 폴더 : -

client / package.json

{
  "name": "projectname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  ...}
  "proxy": "http://localhost:5000"
}

그런 다음 다음을 수행 할 수 있습니다.

await axios.get('/api/products') // straight away use whatever path you've specified