Topic: Contact-Form in Production with Node/Express
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- 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
Arkadiusz Idzikowski staff commented 4 years ago
Please provide more information about the problem and reproduction steps.
gkondrach pro commented 4 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 4 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 4 years ago
Is it necessary to use Angular routing for in-app routing?