Tôi gặp lỗi GET http: // localhost: 3000 / api / products 404 (Not Found)

Question

Chà, có rất nhiều câu hỏi trong StackOverflow về lỗi này mà tôi đã thấy tất cả đều không có câu hỏi nào phù hợp với tôi. Tôi đang sử dụng phản ứng với redux để cố gắng tìm nạp một số sản phẩm. Nút máy chủ phụ trợ của tôi đang chạy trên cổng 5000 và tôi đang sử dụng đồng thời để khởi động cả hai máy chủ cùng lúc bất cứ khi nào tôi cố gắng tìm nạp dữ liệu của nó bằng cách sử dụng cổng 3000, nơi giao diện người dùng của tôi đang chạy. Xin ai đó giúp tôi giải quyết vấn đề này

tệp 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"
  }
}

Đây là tệp productsAction.js của tôi

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,
    });
  }
};

Nếu tôi sử dụng địa chỉ đầy đủ như HTTP: // localhost: 5000 / api / products thì nó sẽ cho tôi lỗi CORS

Answer 1

Nó sẽ dễ dàng hơn nhiều và focusnếu bạn thêm "proxy": "http://localhost:5000"vào thư mục dự án clienthoặc reactthư mục của mình, như sau: -

client / package.json

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

Sau đó, bạn chỉ có thể làm: -

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