Angular application hosted on Apache2 with SSL configured to communicate with a Spring Boot API running on port 8080

After developing a small application using Angular and an API with Spring Boot that includes an embedded Tomcat server, I decided to deploy them on a Raspberry Pi while configuring an SSL certificate with Let's Encrypt.

The deployment process involved installing Apache 2, creating a virtual host for the Angular part, and successfully installing an SSL certificate using Certbot. However, the API part is compiled in a .jar file, which I launch manually from the command line whenever the Pi starts up. The onboard Tomcat server listens on port 8080.

My current configuration looks like this:

<IfModule mod_ssl.c>
<VirtualHost *:443>

        ServerName website.me
        ServerAdmin [email protected]
        DocumentRoot /var/www/html/website

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        SSLCertificateFile /etc/letsencrypt/live/website.me/fullchain.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/website.me/privkey.pem
        Include /etc/letsencrypt/options-ssl-apache.conf

        RewriteEngine On
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
        RewriteRule ^ - [L]

        RewriteCond %{REQUEST_URI} ^/rest/.*$
        RewriteRule ^/rest/(.*) http://website.me:8080/rest/$1 [L]
        RewriteRule ^ /index.html


</VirtualHost>
</IfModule>

Within my proxy.conf file, I have set up configurations for proxying as follows:

<IfModule mod_proxy.c>

        LogLevel proxy:trace5
        ProxyPreserveHost on
        ProxyRequests Off    

        ProxyPassMatch .+\.html$ !
        ProxyPassMatch .+\.js$ !
        ProxyPass ^/rest/(.*)$ http://127.0.0.1:8080/rest/$1
        ProxyPassReverse ^//rest/(.*)$ http://127.0.0.1:8080/rest/$1

</IfModule>

Despite setting up redirections from port 80 to 443 and routing requests from "/rest/*" to port 8080, I encountered a cross-origin security error, making the setup ineffective.

I have attempted to configure a proxy and enable cross-origin access in Apache2 without success. Any suggestions or ideas would be greatly appreciated.

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

Jasmine: A guide to mocking rxjs webSocket

Here is my chat service implementation: import {webSocket, WebSocketSubject} from 'rxjs/webSocket'; import {delayWhen, retryWhen, take} from 'rxjs/operators; import {timer} from 'rxjs; ... export class ChatConnectionService { priva ...

What is the best way to make the current year the default selection in my Select control within Reactive Forms?

Hey there! I managed to create a select element that displays the current year, 5 years from the past, and 3 years from the future. But now I need to figure out how to make the current year the default selection using Reactive Forms. Any ideas on how to ac ...

Angular: The type AbstractControl<any> cannot be assigned to type FormControl

I am working with a child component that includes an input tag <input [formControl]="control"> component.ts file @Input() control: FormControl; In the parent component, I am using it as follows: <app-input [control]="f['email ...

I encountered difficulties in uploading my Angular application to GitHub Pages

I'm running into an issue when attempting to deploy my Angular application using GitHub pages. Here's the error message I encountered: about-me (master)*$ ngh An error occurred! Error: Unspecified error (run without silent option for detail) ...

Error encountered in Snap SVG combined with Typescript and Webpack: "Encountered the error 'Cannot read property 'on' of undefined'"

I am currently working on an Angular 4 app that utilizes Snap SVG, but I keep encountering the frustrating webpack issue "Cannot read property 'on' of undefined". One solution I found is to use snapsvg-cjs, however, this means losing out on the ...

Can JSPDF Autotable support line breaks with unique styles for each line?

Is it possible to create rows in jspdf autotable with two sets of information on separate lines in each cell? Currently, I am using the "\n" operator to display the information on different lines within the same cell. However, I'm looking for a ...

Angular 5 custom dropdown menu

Currently, I am utilizing the ng-select component available at https://github.com/ng-select/ng-select. However, there are instances where the content of the dropdown is too lengthy. To address this issue, I have decided to shorten the string in the dropd ...

An iron-dropdown made of polymer featuring a trigger button made of paper-icon-button

I am facing an issue on my Angular site where I have integrated Polymer. I am trying to add a notifications section to the header, but I am struggling to make the button functional. How can I bind the click event of the button to trigger the dropdown? Thi ...

Looping Through RxJS to Generate Observables

I am facing the challenge of creating Observables in a loop and waiting for all of them to be finished. for (let slaveslot of this.fromBusDeletedSlaveslots) { this.patchSlave({ Id: slaveslot.Id, ...

Add a hash to the file name of the JSON translation asset

To prevent caching issues, I choose to store my translation files as JSON in /src/assets/i18n. To achieve this in Angular, I am looking for a way to add a unique fingerprint or hash to the filename of the file and use that hashed name when retrieving the ...

Encountered an issue while trying to install ngrx store with Angular 13 - unable to resolve the dependency

Encountering an error with the following command: ng add @ngrx/store@latest The error message reads as follows: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-prot ...

Guide to testing template-driven forms in Angular 6

Currently, I am working on a template-driven form which looks like this: <form #form="ngForm" (ngSubmit)="onSubmit()"> <input class="form-control input-lg" id="venue_name" name="venue_name" type="text" #venue_name="ngModel" [(n ...

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

Include various classes within the [ngclass] directive

I tried researching on SO for a solution to the following query, but I am having trouble understanding how to implement it correctly. The goal is to display a delete icon when hovering over a mat td cell, but this icon should only appear for newly added va ...

Fetching DataItem from a Kendo Grid using a custom button in an Angular application

I have been working on transferring the dataItem from a Kendo grid to an Angular 6 component. Here is my setup: <kendo-grid [data]="view | async" [height]="533" (dataStateChange)="onStateChange($event)" (edit)="editHandler($even ...

What exactly is the concept behind the Strategy OnPush?

I am a beginner in the world of Angular2 with TypeScript. As I delve into my project, one concept that continues to elude me is the purpose of OnPush: changeDetection : ChangeDetectionStrategy.OnPush Despite my dedicated efforts in researching this top ...

Switching Workspaces in Visual Studio

Is it possible to switch from an existing project to a new one in Visual Studio using NPM? ...

Tips on Resolving TypeError: Unable to Access Undefined PropertyAre you encountering a

I'm currently facing an issue while writing unit test cases using Jest in my Angular project. Whenever I attempt to run my test file, the following errors occur: TypeError: Cannot read property 'features' of undefined TypeError: Cannot read ...

Sluggish behavior detected in hybrid AngularJS and Angular application when accessed through Safari browser

Lately, I have embarked on the task of migrating an AngularJS application to Angular 4 using the upgrade module. Within my AngularJS directives, I am utilizing a third-party library (ngFlow) for file uploads via XMLHttpRequest.send(). Everything functions ...

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...