Topic: Contact-Form in Production with Node/Express

gkondrach pro asked 3 years ago


Expected behavior

I followed the guide for Contact-Form at https://mdbootstrap.com/docs/angular/forms/contact/. It was a good process, and I expected everything to work in both DEV and in PROD.

When it didn't I looked at many other guides, and verified that each part seemed to be present and operating as-prescribed.

Actual behavior

It WORKS in DEV at localhost:4200. It WORKS with browser LOCAL to DEV VM routed to NGINX --> app/dist/app/index.html.It FAILS with browser REMOTE from DEV routed to same NGINX --> app/dist/app/index.html

Preflighted BACKEND WORKS, using 'curl -XPOST http://localhost:3000/send' on all systems (Debian DEV, Ubuntu DEV/PROD, and FreeBSD PROD), and other curl routines for verifying CORS operation.

Resources (screenshots, code snippets etc.)

No custom code used ... all as published except actual credentials & message

This is my first angular 9 front end to route to a backend node/express service. It's not my first CORS experience with NGINX or Express. I have tried CORS module as well as MDB-published function.

app.use(function (req, res, next) {    
res.header("Access-Control-Allow-Origin", "\*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next();});

Can anyone offer suggestions? Thanks in advance.George


Arkadiusz Idzikowski staff commented 3 years ago

Please provide more information about the problem and reproduction steps.


gkondrach pro commented 3 years ago

Running app in dev to ng server at http://localhost:4200 - app functions as expected ('success').

Running app from dist/mdb-contact-form/index.html in 2 Production cases - different results in different cases:

Production Case 1 = all browsers launched on dev box = 'success'

Production Case 2 = all browsers launched on any remote boxes = 'no success' with no error from server.js

Production Case 3 = all browsers launched on any remote boxes pointing to production server after mdb-contact-form app moved there.

Production server running same server.js as dev box, same node_modules at same versions, but 10.x version of Node not dev 12.x version.

All production cases (where a = dev server and b = live server):

1a. on dev use same route (set via hosts file) http:/form.example.com

1.b on live server use route (via DNS) https://www.example.com

2a. use same nginx on dev box

2b. use same version nginx on live server

3a. use same nginx config on dev

root /dist/mdb-contact-form index index.html

location / { try_files $uri $uri/ =404; if ($request_method = OPTIONS) { return 204; }

add_header 'Access-Control-Allow-Origin' '*';

add_header 'Access-Control-Max-Age' '3600';

add_header 'Access-Control-Expose-Headers' 'Content-Length';

add_header 'Access-Control-Allow-Headers' 'Range'; }}

3b. use same nginx config except root


gkondrach pro commented 3 years ago

I'm wondering about routing of sendMessage() method from remote browser clients. Console messages show failures to connect to http://localhost:3000, which would be on the browser machine, not the one defined in ConnectionService. Doesn't sendMessage() use ConnectionService instead of browser making that direct connection?


gkondrach pro commented 3 years ago

Is it necessary to use Angular routing for in-app routing?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: desktop VM, server
  • Browser: firefox chrome
  • OS: Debian, Ubuntu, FreeBSD
  • Provided sample code: No
  • Provided link: Yes