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

Getting the value of a JLabel dynamically in Java swing: tips and tricks

I have multiple JLabels named num1, num2, ..., num11. These JLabels have a prefix in their variable names. I want to set text for these labels dynamically, but the current method gives me an error. Is there a better way to achieve this? My current solutio ...

javaswing

A guide on integrating the URI.js library into an Angular2+ application

I'm currently exploring ways to integrate a third-party library called urijs into my Angular 2+ application. Below, you can see the relevant files involved in this process. // package.json { ... "dependencies": { ... "urijs": "^1.18.10", ...

angularwebpack

Incorporating DevExtreme into an Angular application

After following the suggested command to add DevExtreme to my angular project using npx -p devextreme-cli devextreme add devextreme-angular, I encountered an issue related to node-modules/sass/embedded or a self-signed certificate problem. Despite trying s ...

angularnpmnode-sassdevextremedevextreme-angular

What is the best way to insert a triangle shape to the bottom of a div with an opacity level set at 0.2

https://i.stack.imgur.com/sqZpM.png I've been trying to create something similar, but my triangle keeps overlapping with the background in the next section. I've already spent 3 hours on it. Any help would be greatly appreciated. Check out my c ...

htmlcssangularsass

Substitute a particular element within a text

I'm currently working on an Angular 9 application where I'm implementing search filters for the Shopify Graphql API. As part of this process, I am constructing a query which looks like: first: 1, query: "tag:'featured-1'", af ...

javascriptangular

Filtering based on the boolean value of a checkbox in Angular

I'm struggling to implement a boolean filter for my search results, separating users with financial debt from those without. I need some guidance on how to achieve this. Data Filter @Pipe({ name: 'filter' }) export class FilterPipe implem ...

angulartypescript

Feeling lost when trying to build a server for a MERN project

I have been working on several small projects and now trying to combine them into one big project, but I am feeling really confused. In project A, I have written a backend with the following code: const express = require("express"); const app = express(); ...

node.jsexpressserverbackend

How to set up an Angular ErrorHandler?

Attempted to register an Angular ErrorHandler in this simplified StackBlitz environment, but it seems that it's not capturing the error thrown within the constructor of the HelloComponent. Any insights on this issue? Your opinions? ...

node.jsangulartypescriptstackblitz

Combine an array of arrays with its elements reversed within the same array

I am working with an array of numbers that is structured like this: const arrayOfArrays: number[][] = [[1, 2], [1, 3]]; The desired outcome is to have [[1, 2], [2, 1], [1, 3], [3, 1]]. I found a solution using the following approach: // initialize an e ...

javascripttypescript

Incorporating a File Attachment within a JSON Structure

Can a file attachment be included in a JSON Object? I am working on an HTML Form with text field inputs and a file attachment, and I would like to send all this form data (including the file attachment) as a JSON Object to the server. Are there any specif ...

javahtmljsonfile

Employing the binary search method to locate the unique number within an array that appears an odd number of times

In my first example, I was able to successfully implement the code but in the second example, I am facing difficulty in obtaining the correct answer. The issue lies in my code searching for the middle position and moving towards the right side of the arr ...

javaalgorithmbinary-search

The issue with Rxjs forkJoin not being triggered within an Angular Route Guard

I developed a user permission service that retrieves permissions from the server for a specific user. Additionally, I constructed a route guard that utilizes this service to validate whether the user possesses all the permissions specified in the route. To ...

angulartypescriptrxjs

Configuring ag-grid in an Angular project

I'm facing an issue with setting up ag-grid in my existing Angular project. Our project currently has version 8.2.0 of ag-grid installed, without any additional dependencies like ag-grid-angular. Do I need to install extra dependencies for ag-grid sup ...

angularag-gridag-grid-angular

Two errors encountered in failing Jest test

Here is the test scenario that I am currently running: it('should return Notification Groups', (done) => { fetchAppNotifications('123', 'abc').subscribe((response) => { try { expect(response).toEqual(MOCK_FET ...

angularts-jestjest-fetch-mock

Error occurred while parsing the HTTP GET response (possible empty String?) - however, the body contains data

I have been working on a script in Javascript that communicates with a local Java Server through HTTP Requests. The structure of my requests is as follows: var req = $.ajax({ type : "GET", dataType : "json", url : "http ...

javajqueryajaxjsonhttp

Delivering static HTML routes in a React App using Typescript

I am working on a React app with functional components, and everything is working perfectly with its own CSS. Now, I have a separate static HTML file (FAQ) with its own CSS and design that I want to incorporate as a new route at /FAQ. I don't want th ...

reactjstypescript

The page fails to load properly unless I hit the refresh button

My Jewlery Store app built with React caters to two types of users: admins and customers. The admin has access to a table displaying all users along with their online or offline status. To achieve this, I added an 'active' attribute to each custo ...

javareactjsreact-router-dom

Ways to determine the generic type of a property value from a decorated property within a decorator

While experimenting with some code, I encountered an issue where the generic type of a property value wasn't being resolved correctly when changing from TValue to (t: TValue) => TValue. Instead of being recognized as the expected number, it was now ...

typescriptgenericsgeneric-programmingtypescript-decorator

Include an additional component in the array that is already in place

The provided data currently consists of an array with three elements. (3) [{…}, {…}, {…}] 0: {Capacity: "150", Series: "20", Make: "150", Model: "150", TowerHeight: "151", …} 1: {Capacity: ...

angular

The error message displayed was "Unable to define the isMultiple property for Jasmine."

Encountering an issue in my test: Failed: Cannot set property 'isMultiple' of undefined The test script that I am using is fairly standard. Here's how it looks: beforeEach(() => { fixture = TestBed.createComponent(DropdownTypeah ...

angularjasminekarma-jasmine