Skip to content

Rewrite and redirects override Angular proxy #13020

Open
@Phok7

Description

@Phok7

Before opening, please confirm:

JavaScript Framework

Angular

Amplify APIs

Authentication, REST API, GraphQL API

Amplify Version

v6

Amplify Categories

auth, function, api

Backend

Amplify CLI

Environment information

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 3.55 GB / 15.46 GB
    Container: Yes
    Shell: 3.3.1 - /usr/bin/fish
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.216
  npmPackages:
    @angular-devkit/build-angular: ^17.0.1 => 17.0.1 
    @angular/animations: ^17.0.0 => 17.0.3 
    @angular/cdk: ^17.0.1 => 17.0.1 
    @angular/cli: ^17.0.1 => 17.0.1 
    @angular/common: ^17.0.0 => 17.0.3 
    @angular/compiler: ^17.0.0 => 17.0.3 
    @angular/compiler-cli: ^17.0.0 => 17.0.3 
    @angular/core: ^17.0.0 => 17.0.3 
    @angular/forms: ^17.0.0 => 17.0.3 
    @angular/material: ^17.0.1 => 17.0.1 
    @angular/platform-browser: ^17.0.0 => 17.0.3 
    @angular/platform-browser-dynamic: ^17.0.0 => 17.0.3 
    @angular/router: ^17.0.0 => 17.0.3 
    @aws-amplify/pubsub: ^6.0.5 => 6.0.5 
    @aws-amplify/ui-angular: ^5.0.1 => 5.0.1 
    @types/d3: ^7.4.3 => 7.4.3 
    @types/jasmine: ~5.1.0 => 5.1.2 
    @types/leaflet: ^1.9.8 => 1.9.8 
    aws-amplify: ^6.0.3 => 6.0.5 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    bootstrap: ^5.3.2 => 5.3.2 
    d3: ^7.8.5 => 7.8.5 
    jasmine-core: ~5.1.0 => 5.1.1 (4.6.0)
    karma: ~6.4.0 => 6.4.2 
    karma-chrome-launcher: ~3.2.0 => 3.2.0 
    karma-coverage: ~2.2.0 => 2.2.1 
    karma-coverage-coffee-example:  1.0.0 
    karma-jasmine: ~5.1.0 => 5.1.0 
    karma-jasmine-html-reporter: ~2.1.0 => 2.1.0 
    leaflet: ^1.9.4 => 1.9.4 
    moment: ^2.29.4 => 2.29.4 
    rxjs: ~7.8.0 => 7.8.1 
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    tslib: ^2.3.0 => 2.6.2 (1.14.1)
    typescript: ~5.2.2 => 5.2.2 
    zone.js: ~0.14.2 => 0.14.2 
  npmGlobalPackages:
    @angular/cli: 17.0.1
    @aws-amplify/cli: 12.8.2
    corepack: 0.15.2
    npm-check-updates: 16.14.6
    npm: 8.19.3

Describe the bug

Hello, I have an Angular app which requires to make externals API calls, the method to do this is with an Angular proxy like that:

The proxy.conf.json file look like that:

{
  "/aemet/**": {
    "target": "https://opendata.aemet.es/opendata",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/aemet": ""
    },
    "logLevel": "debug"
  }
}

And in the angular.json config I have the "proxyConfig" rule configured in the "serve" section, all works fine in my local enviroment.

Then in the Amplify Rewrites and redirects section I add this rule:

Source address: /aemet/<>
Target address: https://opendata.aemet.es/opendata/<
>
Type: 301 (Redirect - Permanent)

Screenshot_20240216_134042

The problems occurs when y deploy the app, what happens is that I ever get an CORS error due to the Angular proxy is not working because the Amplify redirection override this.

There are any way to solve this issue removing the Rewrite rule or something similar?

I have try everything, adding the Angular proxy, removing, adding Amplify Rewrites and removing, changing the Type of the redirection... but nothing works.

If I use Postman works fine but the problem is with the Angular app, because the request is made by de HttpClient library of Angular and is sent over a browser, if the Angular proxy may works, no problems should occurs.

Thanks.

Expected behavior

The app should use the Angular proxy configuration instead of use the Amplify rewrite rule.

Reproduction steps

  1. Install Amplify with Angular framework.
  2. Create a proxy.conf.json with the desired external api target and configure angular.json to use it.
  3. Make a call to an external api with the HttpClient Angular library.
  4. Deploy the app and execute de request to the external API.

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line


aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
"aws_project_region": "us-east-1",
"aws_cloud_logic_custom": [
{
"name": "AdminQueries",
"endpoint": "https://xxxxxxxxxxxx",
"region": "us-east-1"
}
],
"aws_appsync_graphqlEndpoint": "http://192.168.1.26:20002/graphql",
"aws_appsync_region": "us-east-1",
"aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
"aws_appsync_dangerously_connect_to_http_endpoint_for_testing": true,
"aws_cognito_identity_pool_id": "us-east-1:xxxxxxxxxxx",
"aws_cognito_region": "us-east-1",
"aws_user_pools_id": "us-east-1_xxxxxxxxxxx",
"aws_user_pools_web_client_id": "xxxxxxxxxxxxx",
"oauth": {},
"aws_cognito_username_attributes": [
"EMAIL"
],
"aws_cognito_social_providers": [],
"aws_cognito_signup_attributes": [
"EMAIL"
],
"aws_cognito_mfa_configuration": "OFF",
"aws_cognito_mfa_types": [
"SMS"
],
"aws_cognito_password_protection_settings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": []
},
"aws_cognito_verification_mechanisms": [
"EMAIL"
]
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

Metadata

Metadata

Assignees

Labels

APIRelated to REST API issuesAngularRelated to Angular 2+questionGeneral question

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions