Как исправить CORS с Angular App, размещенным на Heroku? - PullRequest
Новая
       26

Как исправить CORS с Angular App, размещенным на Heroku?

0 голосов
/ 01 октября 2019

Я следовал этой статье (01.10.2019 12:15), чтобы развернуть Angular App на Heroku, фактически отлично работал на моем ноутбуке.

Однако, открывая в моем мобильном телефоне запросыне сработало. Я работаю со стеком MEAN.

По существу, бэкэнд находится в выражении узла, который связывается с MongoDB и обрабатывает документы. Я также размещал серверную часть на Heroku, которая возвращала ссылку вроде "backend.appheroku.com". Если я запускаю это в PostMan, например, чтобы делать запросы, он работает нормально. Неважно, какое устройство я запрашиваю (например: GET backend.appheroku.com/users).

В FrontEnd Angular App, конечно, я создал service.ts такчто я делаю запросы, такие как GET, POST и т. д. Heroku также вернул ссылку, например "frontend.appheroku.com" . Это хорошо работает на моем ноутбуке, однако, запустив эту ссылку на моем мобильном телефоне, я больше не могу делать запросы из приложения FrontEnd. Например, "frontend.appheroku.com/users" запрашивает коллекцию "users" у "backend.appheroku.com" / users и отображает результаты в HTML.

Я просто знаю, что это из CORS проблема, однако я так и не нашел решения. Я также пытался следовать инструкциям https://expressjs.com/en/resources/middleware/cors.html, но безуспешно.

Файл Backend.js: 

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/users', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

let port = process.env.PORT || 3050;

app.listen(port, function () {
  console.log('CORS-enabled web server listening on Heroku port')
})

Заранее спасибо.

1 Ответ

1 голос
/ 03 октября 2019

Мне пришлось добавить код ниже в моем backend.js (Спасибо @ fridoo ): 

app.options('*', cors()) // include before other routes

В package.json мне также пришлось добавить "heroku-postbuild ":" ng build --prod ": 

{
    "postinstall": "ng build --aot --prod",
    "heroku-postbuild": "ng build --prod" // add this for heroku
},
...