What are the advantages of combining the website URL and API URL within the Angular service?

When deploying my application in a production environment, I encounter an issue with the URL addresses. The web address is , while the API address is . However, when making a request to the API through Angular, the URLs get concatenated into . This issue does not occur in the local environment. How can I prevent this concatenation and ensure that only the API address is used?

https://i.sstatic.net/9Hz65.jpg The service login:

https://i.sstatic.net/VXm62.jpg

The section highlighted in yellow represents the API address, while the preceding part denotes the web address.

https://i.sstatic.net/9oUGB.jpg

angulartypescriptangular7angular8

Answer №1

The problem arises from the omission of a protocol in the URL. Ensure to include http:// at the beginning of the apiURL variable to resolve this issue. Failing to do so results in the path becoming relative to the current URL, causing the Post Request URL to be concatenated with the page URL.

Answer №2

Angular is assuming that the URL is relative rather than absolute because it lacks the http:// or https:// protocol.

To fix this, you need to assign apiUrl as follows:

http://172.19.116.98/Calidad/public/api

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

Oh no! It seems like the build script is missing in the NPM

https://i.stack.imgur.com/el7zM.jpg npm ERR! missing script: build; I find it strange, what could be causing this issue? Any suggestions? I have included the fullstack error with the package.json. Please also review the build.sh code below. Fullstack err ...

javascriptnode.jstypescript

Error: Import statement cannot be used outside a module (@cucumber/cucumber) while using Node.JS, Playwright, and Cucumber framework

I encountered an issue while attempting to compile my Node.js code that is compliant with ECMAScript 6: $ npx cucumber-js --require features/step_definitions/steps.ts --exit import { Before, Given, When, Then } from "@cucumber/cucumber"; ^^^^^^ ...

node.jstypescriptecmascript-6playwrightcucumberjs

What is the best way to include a button at the bottom of a Material UI table?

I've been working with Material UI in React TypeScript and I'm having trouble adding a button at the bottom that leads to a form. Despite my attempts, I haven't been successful. Can someone please help me with this? I just need a simple butt ...

reactjstypescriptmaterial-ui

Exploring the discrepancies in utilizing the i18n library versus directly incorporating locale from JSON in vue.js

Recently, I decided to incorporate Chinese language into my Vue app. To achieve this, I loaded the entire JSON text into Vuex and utilized the stored text directly, instead of relying on an i18n library. I'm curious to know if there are any potential ...

angularreactjsvue.jsinternationalization

When setting a value through the DOM, the input's value bound with ngModel in Angular does not get updated

Trying to upload a file to calculate its hash and display it in an input box. If done correctly, the value should show in the form, but when submitting the form, the value does not get sent. Only adding a blank space by clicking on the input field works: ...

javascriptangularangular-ngmodel

Error Encountered in Webpack Development Server: Module 'ipaddr.js' Not Found

I encountered an error when running the webpack dev server, as shown below: After trying to run it with different methods using both local and global packages, I am currently using the following versions: "webpack": "^2.5.1", "webpack-dev-server": " ...

angularnpmwebpackwebpack-dev-serverwebpack-2

Tips for optimizing HttpRequests within nested for-loops that utilize subscribe()?

Our REST-API is designed to be frontend agnostic, meaning it always sends the IRI to nested resources. This results in multiple HTTP calls needed to retrieve data; first for the parent resource, then its child resources and so on. Each Country has linked E ...

angulartypescriptrxjsrxjs-observables

Issues with TypeScript Optional Parameters functionality

I am struggling with a situation involving the SampleData class and its default property prop2. class SampleData { prop1: string; prop2: {} = {}; } export default SampleData; Every time I attempt to create a new instance of SampleData without sp ...

typescript

Adding a type declaration to the severity property in React Alert - A guide to Typescript

I've developed a type declaration object for the incoming data, but no matter what I try to define as the type for the property "severity", it's not happy. The options it wants (as displayed below) don't seem feasible. I'm curious if th ...

javascripttypescriptmaterial-ui

Using Angular to fetch API response and convert it into a promise

I've been following the Angular tutorial available at https://angular.io/tutorial/toh-pt6. The tutorial demonstrates how to retrieve a Json response from an API call and then match it to a promise. One specific example from the tutorial is as follows ...

javascriptangularaws-api-gateway

Route Not Found: URL Segment 'homePage' does not match any existing routes

Every time I click the login button, I want to be redirected to the home page. However, I keep encountering this error message : Error: Cannot match any routes. URL Segment: 'homePage' This is my route configuration: { path: 'homePage&a ...

angularangular-router

Enhanced HTML support for * syntax in IntelliJ Angular 2

It appears that IntelliJ 2017.1 does not fully support the * syntax for HTML files with Angular 2. The autocompletion only suggests the template syntax without the star. https://i.stack.imgur.com/k6SuD.png https://i.stack.imgur.com/QfNPH.png Moreover, w ...

angularintellij-idea

Issue: npm encountered an error due to writing after reaching the end

I've encountered a problem while trying to install Cordova and Ionic. Due to what appears to be a corrupted installation, I had to uninstall NodeJS - Cordova - Ionic. After re-installing NodeJS successfully, the trouble began when running the pop ...

javascriptnode.jsangularionic-frameworknpm

Discovering an Akita feature where Angular's select query gracefully handles the

Currently, I am exploring alternatives to NgRx, and Akita seems like a promising option. However, I am facing challenges with error management. There are times when I want an error to be handled at the app level, while in other cases, I prefer it to be man ...

angularangular-akitaakita

Unexpected behavior with HashLocationStrategy

I am currently tackling a project in Angular2 using TypeScript, and I seem to be having trouble with the HashLocationStrategy. Despite following the instructions on how to override the LocationStrategy as laid out here, I can't seem to get it to work ...

typescriptangular

How to customize toggle icon in Angular Material mat-slide-toggle

I'm currently using Angular6 to design my user interface. The default style of the mat-slide-toggle button is shown below: https://i.stack.imgur.com/tIqus.png However, I would like the toggle button to have the appearance of the material-icons togg ...

angularangular-materialgoogle-material-icons

Accessing different pages in Angular 2 based on user type

If I have four pages and two user types, how can we implement access control in Angular 2 so that one user can access all four pages while the other is restricted to only two pages? ...

angulartypescript

How can I exclude the last parameter from a function type in Typescript?

If I have a function type like this: type FunctionType = (a: number, b: string, c: boolean) => void How can I create a new type with the last parameter removed? type NewFunctionType = OmitLastParameter<FunctionType> Desired type for NewFunctionT ...

typescript

What is the best way to retrieve an accurately matched array?

I am working on a function that analyzes a string of DNA and should return an accurately matched DNA array. Here is the code snippet I have experimented with: function checkDNA(dna) { var dnaarr = []; for(var i = 0; i < dna.length; i++) { ...

javascripttypescriptbioinformatics

Trouble displaying object in template using Angular's ngrx

Within my Typescript interface, I have declared the following structure: export interface FolderList { ADMIN: [Folder[], string, string]; SUPERADMIN: [Folder[], string, string]; USER: [Folder[], string, string]; } The 'Folder' interface is de ...

angulartypescriptngrx