Блог

Главная - Вопросы по программированию - Не удалось забрать — Героку

Не удалось забрать — Героку

#javascript #node.js #heroku #cors

Вопрос:

Я использую Node JS Express для бэкенда и обычный HTML для интерфейса. По нажатию кнопки я пытаюсь отправить данные формы в MongoDB через узел JS.

Клиент [HTML]

 <a href="javascript:void(0);" onclick="sendData();" id="get-marker-value" class="btn pxp-hero-contact-form-btn">Get Market Value</a>

<script type="text/javascript">
            function sendData(event){
                let name = document.getElementById("name").value;
                let email = document.getElementById("email").value;
                let phone = document.getElementById("phone").value;
                let address = document.getElementById("address").value;

                if(name != '' || email != '' || phone != '' || address != ''){
                    let formData = JSON.stringify({
                        name: name,
                        phone: phone,
                        email: email,
                        address: address
                    });
                    let url="<SERVER_URL>/listing/add_listing";
                    
                    fetch(url, {
                        method: 'post',
                        body: formData,
                        headers:{"Content-Type" : "application/json"}
                    }).then(response => response.json())
                    .then( (result) => {
                        console.log('success:', result);
                        $('#get-marker-value').addClass('hide');
                        $('#get-marker-value-success').addClass('show');
                    })
                    .catch(error => console.log('error:', error));
                }
                else{

                }
            }
        </script>

На стороне сервера,

 var listingRouter = require('./routes/listing');
app.use('/listing', listingRouter);

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE" // what matters here is that OPTIONS is present
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`)
})

Маршруты — Список

 router.post('/add_listing', function(req, res) {
  console.log("Post Request");
  console.log(req.body);
    const name = req.body.name;
    const phone = req.body.phone;
    const email = req.body.email;
    const address = req.body.address;
    const date = new Date();

    const newListing = new Listing({
      name,
      phone,
      email,
      address,
      date,
    });
    newListing.save()
      .then(() => res.json('Listing added!'))
      .catch(err => res.status(400).json('Error: '   err));
});

Код отлично работает на местном языке, но возникли проблемы в Heroku.

Ответ №1:

URL-адрес на стороне клиента, указывающий на локальный хост, который вам нужен, чтобы указать на ваш сервер heroku

   let url="http://localhost:3000/listing/add_listing";

также ознакомьтесь с руководствами по использованию heroku
. вам также необходимо убедиться, что ваша база данных подключена к серверу heroku
. Здесь вы можете получить дополнительную информацию о том, как развернуть heroku:
https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app

Метки: