Discover how to capture and process POST form data in Angular originated from external sources

I am currently building a website that utilizes Java for the backend and Angular for the frontend. I have encountered a scenario where external websites may transmit data to my site via POST form submissions. For example,

▼ General
        Request URL: https://myangularwebsite/
        Request Method: POST
        ...

▼ Request Headers
        Content-Type: application/x-www-form-urlencoded
        Host: myangularwebsite
        Origin: https://externalwebsite
        Referer: 

https://externalwebsite/send.form?id=0

        ...

▼ Form data
        ID: 0000000
        TIME: 2017.06.04 11:53:58
        SIGNATURE: ...geirgmGKFGJWR...
        ...

At this point, I need to find a way to capture the form data in Angular, then send or redirect it to the backend for signature validation before receiving the response back in Angular to continue working on the website. I attempted to test the process by posting to my site using Postman, but received an error message stating Cannot POST /.

While I am familiar with handling GET requests and URL query parameters in Angular, I believe I need to delve into processing POST requests based on the headers observed in the 'Network' section of Chrome DevTools when transferring from externalwebsite to myangularwebsite.

Would it be advisable to create a specific route in the backend, such as .../api/external, and instruct these external sites to use this link instead of directly submitting forms to the homepage of my Angular-powered site?

I have come across a related question ( How to read form post data in Angular 2 typescript? ) which touches on a similar topic, however, employing PHP doesn't seem like the right path for me given that the current version of the site is already built using PHP.

javaangulartypescriptfrontendbackend

Answer №1

The answer provided in the link you shared is accurate: achieving this task solely with JavaScript is not possible; server-side code is required. While PHP was mentioned as an example, any server-side component can be used. Given that Java is your backend language, it's best to stick with Java.

When dealing with HTTP requests from external sites, a server-side component must be utilized. There are different approaches to consider.

  1. If the request originates from the user's browser (similar to a redirect but using a POST method), you can handle it by capturing the request on the backend, sending some data and Javascript to the user's browser, and then processing the data within your Angular code. Alternatively, it could involve redirecting to your primary Angular entry point - the choice is yours.

  2. In cases where the request is made through alternative methods (such as a server-to-server request initiated with curl, like a notification from Credit Card processing) without involving a browser, there is no need for JavaScript (be it Angular or otherwise) since they are only necessary for web browsers. Here, simply handling the request on the server-side suffices.

In either scenario, establishing a specific endpoint dedicated to managing externally-originated requests appears to be a sensible solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to transfer information from a parent component to a child component in Angular 5 without the need for *ngFor

Currently, I am utilizing *ngFor to iterate through a selector and passing data to the child component. Let's take a look at the code snippet below: <app-piegraph *ngFor="let studentData of studentData" [studentData]="studentData"></app-pieg ...

angularangular-components

The Angular application remains unminified after being built with the "prod" flag

Currently, my Angular 7 project is configured for production build with the settings optimization=true and buildOptimizer=true. Below, you will find a snippet of the full production configuration from my angular.json file. I have set up an automated build ...

angularamazon-web-servicesnpmweb-applicationsaws-amplify

Encountering a NoSuchFileException for semver when attempting to generate resources using the frontend-maven-plugin, even though the file

While using the frontend-maven-plugin for executing npm commands in the build process, everything seems to be running smoothly until an issue arises during resource copying: [DEBUG] file semver has a filtered file extension [DEBUG] Using 'UTF-8' ...

javamavennpmsemantic-versioning

Ways to extract values from a javascript hash map by exclusively incorporating an array

So here's the issue I'm encountering. Let's consider the following scenario: let surfaces: Map<any, any> = new Map([{"83.1" => Object}, {"84.1" => Object}]) let arr1 = ["83.1"] This is the desired o ...

javascriptarraysangulartypescripthashmap

Promise disregards the window being open

I'm facing an issue with redirecting users to Twitter using window.open in a specific function. It seems like the instruction is being ignored, even though it works perfectly on other pages. Any ideas on how to fix this? answerQuestion() { if ...

javascriptangulartypescriptionic-frameworkcapacitor

Typescript's async function failing to execute properly

I'm currently facing an issue with my code and I'm a bit puzzled as to where the problem lies. The console is displaying the correct data for this.allNominations, but it appears that the third for-loop is not being executed at all. As a result, t ...

angulartypescriptasync-await

Error 404 encountered when updating packages in Angular2 tutorial: platform-browser-dynamic.umd.js

I recently started following an Angular2 tutorial, but upon returning to it and reaching the Routing chapter, I realized that the tutorial had been slightly updated. This required me to go back and update the package.json file to match the current version, ...

angularjsangularnpm

Step-by-step guide for setting up automatic Tslint in IntelliJ

When working on an Angular project in Intellij, I often encounter numerous tslint errors while coding. Is there a command within Intellij that can automatically fix all of these lint errors? ...

angulartypescriptintellij-14tslint

Discover the most helpful keyboard shortcuts for Next.js 13!

If you're working with a standard Next.js 13 app that doesn't have the experimental app directory, setting up keyboard shortcuts can be done like this: import { useCallback, useEffect } from 'react'; export default function App() { c ...

javascriptreactjstypescriptnext.js

Express is having trouble rendering the static index file

I am currently working on an Angular application, where my goal is to serve the build files from the Angular application using the dist directory in my express server. In order to achieve this, I am copying the files generated by ng build and pasting them ...

node.jsangularexpress

Angular component failing to refresh data upon service response

Within my Angular component, I have integrated badges onto certain icons. These badge numbers are fetched from an api upon entering the page, utilizing ionViewWillEnter(). Once the api response is received, the outcome is stored in a local variable, which ...

angularionic-frameworkangular-changedetection

Is there a way to define an object's keys as static types while allowing the values to be dynamically determined?

I am attempting to construct an object where the keys are derived from a string union type and the values are functions. The challenge lies in wanting the function typings to be determined dynamically from each function's implementation instead of bei ...

typescript

Mistakes that occur while trying to expand a base class to implement CRUD functionality

Creating a base class in TypeScript for a node.js application to be extended by all entities/objects for CRUD operations is my current challenge. The base class implementation looks like this: export class Base { Model: any; constructor(modelName ...

node.jstypescript

Can the Date class be expanded by overloading the constructor method?

In my dataset, there are dates in different formats that Typescript doesn't recognize. To address this issue, I developed a "safeDateParse" function to handle extended conversions and modified the Date.parse() method accordingly. /** Custom overload ...

angulartypescript

How to access enums dynamically using key in TypeScript

export enum MyEnum{ Option1, Option2, Option3 } string selection = 'Option1'; MyEnum[selection] results in an error: The type string cannot be assigned to the type MyEnum On the other hand: MyEnum['Option1'] works as ...

typescriptenums

Can you explain the significance of the "@" symbol in the `import from '@/some/path'` statement?

When I use IntelliJ IDEA to develop a web application in TypeScript, the autocomplete feature suggests imports from other files within my project like this: import {Symbol} from '@/components/Symbol'; I am curious about the significance of the @ ...

typescriptwebpacknext.jstypescript-module-resolution

Why did the compilation of Next.js using TypeScript and ESLint succeed despite encountering errors?

I've been delving into Next.js and encountered unexpected results when integrating TypeScript and ESLint. ESLint seems to work well with TypeScript, but my project compilation is successful despite encountering errors. It's puzzling why the comp ...

typescriptnext.jseslint

Extremely sluggish change identification in combination Angular application

We are encountering consistent issues with slow change detection in our hybrid AngularJS / Angular 8 app, especially when dealing with components from different versions of the framework. The problem seems to arise when using older AngularJS components wit ...

javascriptangularjsangulartypescript

How can I display a new module in Angular without navigating to it?

After following the tutorial at https://angular.io/guide/lazy-loading-ngmodules#create-a-feature-module-with-routing I set out to create the following: My goal is to have a dedicated module for all customer-related components accessible through the /cust ...

angulartypescript

Navigating in Angular: How can I direct to a completely new page instead of injecting it into <router-outlet></router-outlet>?

I am in the process of designing a new HTML page that requires a unique header compared to my other pages. Typically, I have been using <router-outlet></router-outlet> to inject content, resulting in consistent headers and footers across all ...

angularangular-routing