Encountering CORS error when making a call to AWS API from Angular 9

Currently, I am working on implementing a post method in Angular 9 that interacts with an AWS API. However, upon calling the post function in Angular 9: 

this.http.post(url, body, requestOptions)
, I encountered an error in my browser stating: 
Access to XMLHttpRequest at 'url' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
Even after enabling CORS on my AWS API and deploying it, as well as adding the necessary proxy.conf.json configuration in my angular.json:


{
"/api/*": {
"target": "url",
"secure": true,
"changeOrigin":true
}

I am still facing the CORS error. Interestingly, when testing my POST request using Postman, everything works perfectly fine. Is there any solution available to resolve this CORS issue?

angulartypescriptamazon-web-servicespostcors

Answer №1

My recommendation would be to refer to the Enabling CORS for a REST API resource documentation on AWS's website.

The fact that the request is successful in Postman indicates that the problem is probably related to the client side.

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

Shuffle and Place indented list

I have a bunch of ideas and a list of projects. I need to choose one idea and match it with a project. I followed this guide to implement the drag and drop feature, but encountered an issue where every project gets assigned the same idea when dragging and ...

angulartypescriptdrag-and-drop

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Issue: I am facing an issue where I cannot record video or get a video stream from the camera on iOS through my Angular web application built using ng build. Investigation: In my investigation, I explored various websites that discuss Apple iOS features ...

htmliosiphonetypescriptmediarecorder

Obtaining the count of a specific column in Angular 6 by grouping objects based on the same value in an array

In TypeScript, I have an array of objects and I am using a foreach loop. The array contains 2 columns with a progress value of 100, while the rest have values less than 100. My goal is to calculate the count of columns with a progress value of 100, which ...

htmlangulartypescript

Transforming button click from EventEmitter to RXJS observable

This is the functionality of the component utilizing EventEmitter: import { Component, Output, EventEmitter } from "@angular/core"; @Component({ selector: "app-my-component", template: ` <button (click)="clickEvent($event)& ...

angulartypescriptrxjs

Apollo GraphQL Server is unable to provide data to Angular

I've been facing a challenge for quite some time now trying to make my Angular component communicate with an Apollo GraphQL server using a simple Query (PingGQLService). I'm currently utilizing apollo-angular 4.1.0 and @apollo/client 3.0.0, and h ...

angulartypescriptgraphqlapolloapollo-angular

Use a function on values that have corresponding keys in a separate array

I am working with a form.value object that looks like this: form.value = { "to_date": "2019-03-21T05:00:00.000Z", "from_date": "2019-03-13T05:00:00.000Z", "is_form": "" "errors":"" } Additionally, I have an array called filterArray: filterArray ...

arraysangulartypescriptobjectangular-reactive-forms

What are the steps to resolve routing issues within an Angular component integrated into an ASP.NET Core web application?

When it comes to routing in Angular, I have been following the Angular tutorial from documentation. My example application integrates Angular components with an ASP.NET Core 2.2 web app, and these components are displayed within .cshtml views. I use Angul ...

angulartypescriptroutesasp.net-core-2.2

Guide to configuring a function to display the maximum value on a boxplot in Highcharts

I'm currently using Angular in combination with the highcharts boxplot API. While I am aware that I can manually set the max value of the y-axis in the chart configuration, such as: max: 100, tickInterval: 10. There's now a need for me to dynami ...

javascriptangulartypescripthighchartsboxplot

React: The Material-UI autocomplete input, controlled with the React Hook Form `<controller>` component, experiences issues when the `multiple` prop is set to `true`

Currently facing challenges with managing an autocomplete MUI component using the <controller> component in react-hook-form. Take a look at the code snippet below: <Controller control={control} name="rooms" render={({ field }) =&g ...

reactjstypescriptmaterial-uiautocompletereact-hook-form

Utilize TypeScript functions within Angular applications

I have successfully created a TypeScript module and after compiling it, I am generating a JavaScript file. However, when I try to use this JavaScript file within my Angular project in the index.html, it loads but I cannot access its functionality from any ...

javascriptangularjstypescripttypescript1.8

When using EmotionJS with TypeScript, the theme type is not properly passed to props when using styled components

CustomEmotions.d.ts import '@emotion/react'; declare module '@emotion/react' { export interface Theme { colors: { primaryColor: string; accentColor: string; }; } } MainApp.tsx import { ...

typescriptemotion

Discovering the key to displaying a brand new component when a button is clicked in Angular5

I'm struggling with creating a login page that, when the login button is clicked, loads a completely new screen with elements like a dashboard. The information I've found online doesn't quite match what I need. Any assistance would be grea ...

angularangular2-routingangular5

Implementing the Infinite Scroll feature with 'react-infinite-scroll-component' on local JSON data: A step-by-step guide

Currently experimenting with frontEnd development, I have incorporated the 'react-infinite-scroll-component' as a dependency. My goal is to apply this effect to my local Json data without relying on any API calls at this stage. I'm encounter ...

javascriptreactjsjsontypescriptinfinite-scroll

Using Dropbox for seamless navigation

My navigation using Dropbox is not redirecting to the selected page as expected. Below, I have provided code and a demo for your reference. App Routing Module import { NgModule } from '@angular/core'; import { CommonModule } from '@angular ...

angulartypescript

Troubleshooting the issue with integrating a user-defined Cordova plugin in Ionic 2 using TypeScript

I have developed a custom Cordova plugin and I am trying to integrate it with an Ionic 2 project that is using TypeScript and Angular 2. While I have successfully added the plugin to the Ionic 2 project, I am facing issues when trying to call methods defin ...

angulartypescriptionic-frameworkionic2cordova-plugins

The data type 'boolean' cannot be assigned to the type 'CaseReducer<ReportedCasesState, { payload: any; type: string; }>'

I recently developed a deletion reducer using reduxjs/toolkit: import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { AppThunk } from "../store"; import { ReportedCase, deleteReportCase } from "../../api/reportedCasesApi"; import history ...

javascripttypescriptreduxredux-toolkit

When examining an element in an Angular application using Chrome Dev Tools, why do I not observe raw HTML code?

Just as the title suggests, my question is: Even if browsers don't understand Angular, why am I able to see Angular elements while inspecting the DOM despite using AOT (Ahead-Of-Time Compilation) which means there is no Angular compiler in the browse ...

javascripthtmlangulardomgoogle-chrome-devtools

Implement a context path in Angular 2 for enhanced functionality

Is there a way to change the base URL for my app from http://localhost:4200 to http://localhost:4200/pilot/? I attempted to modify the base href in index.html, but encountered an Uncaught SyntaxError: Unexpected token < This is the code snippet from m ...

htmlangularhrefangular2-routing

Sending a POST request using PHP CURL with an empty value in the data

I have tried using this code to send data via POST request to a specific URL. The content-type header is set as text/html. file_get_contents("php://input"); The code appears to be successfully sending the data, however, the values are not being received a ...

phpjsoncurlpost

Incorporating jsbi into a TypeScript project while adhering to strict mode

I have been developing a TypeScript library that relies on native BigInts. While it functions perfectly in Chrome, I encountered some issues with Safari. After some research, I stumbled upon the jsbi "polyfill" that seems to solve this problem. Unfortunat ...

javascripttypescriptbigint