Блог

Я создал приложение MERN с полным стеком и пытаюсь развернуть его на Heroku. Но, похоже, я не могу заставить интерфейс подключиться к серверной части. Я пытаюсь выполнить простой post-запрос к своему бэкэнду, используя axios:

 axios.post("/api/items", { item }).then((res) => {
      if (res.status === 200) {
        this.setState({ sended: true });
      }
    });
  

При этом я также использую прокси-сервер из http-proxy-middleware в setupPorxy.js:

 const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(proxy(['/api' ], { target: 'http://localhost:5000' }));
}
  

На стороне моего сервера у меня включен CORS. Я также пытался изменить http://localhost:3000 на https://merninschrijvingen.herokuapp.com :

 app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
  );
  next();
});
  

Я также определил местоположение своего клиента:

 app.use("/api/items", items);

const port = process.env.PORT || 5000;

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

app.listen(port, () => console.log("Server starter on port "   port));
  

Это мой экземпляр axios с baseUrl:

 import axios from "axios";

const instance = axios.create({
  baseURL: process.env.baseURL || "http://localhost:5000/",
});

export default instance;
  

Это примеры запросов, которые я отправляю из интерфейса в Heroku:

Это полная server.js файл:

 const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const path = require("path");
const cors = require("cors");

const items = require("./routes/api/items");

const app = express();

//Bodyparser Middleware
app.use(bodyParser.json());

app.enable("trust proxy");
app.use(cors());

app.use(function (req, res, next) {
  res.setHeader(
    "Access-Control-Allow-Origin",
    "https://merninschrijvingen.herokuapp.com"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
  );
  next();
});

//DB Config
const db = require("./config/keys").mongoURI;

//Connect to Mongo
mongoose
  .connect(process.env.MONGODB_URI || db, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB Connected"))
  .catch((error) => console.log(error));

//Use Routes
app.use("/api/items", items);

const port = process.env.PORT || 5000;

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

app.listen(port, () => console.log("Server starter on port "   port));