POST and PUT routes for React app do not work

[kstonekuan]

Hi, I am unable to add or edit products as the POST and PUT routes do not work. Seems like when the "+" or "Edit" functions are used, upon saving they will send requests to http://localhost:3000/products/api/products instead of http://localhost:3000/api/products thus causing the requests to fail.

Load and delete products features both work.

Same issue faced with the authentication tutorial: https://github.com/MicrosoftDocs/mslearn-staticwebapp-authentication

[kstonekuan]

I am able to get it working by changing the route that is requested for add and edit in react-app/src/store/product.api.js as such:

import axios from 'axios';
import { parseItem, parseList } from './action-utils';
import API from './config';

const captains = console;

export const deleteProductApi = async (product) => {
  const response = await axios.delete(`${API}/products/${product.id}`);
  return parseItem(response, 200);
};

export const updateProductApi = async (product) => {
  captains.log(product.id);
  const response = await axios.put(`../${API}/products/${product.id}`, product); // Here
  return parseItem(response, 200);
};

export const addProductApi = async (product) => {
  const response = await axios.post(`../${API}/products`, product); // Here
  return parseItem(response, 201);
};

export const loadProductsApi = async () => {
  const response = await axios.get(`${API}/products`);
  return parseList(response, 200);
};

EDIT: You can also change the config to have a / in front like /api so it is an absolute path instead of relative.