Rewrite and redirects override Angular proxy

[Phok7]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

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)

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

[cwomack]

Hello, @Phok7 and appreciate your patience on a response here. Is this specifically happening when you're trying to make Auth API calls on your deployed app? Are you applying custom headers on Amplify and could you possibly share your app id too?

[cwomack]

@Phok7, wanted to follow up again with another suggestion if you're still experiencing this. Can you also check to see if you've enabled CORS for your endpoints?

[Phok7]

Hello @cwomack and sorry for the wait.

Hello, @Phok7 and appreciate your patience on a response here. Is this specifically happening when you're trying to make Auth API calls on your deployed app? Are you applying custom headers on Amplify and could you possibly share your app id too?

Yes, only happens in deployed apps, because of the Amplify rewrite rule.

I don't know what you mean with if I can share the app id, sorry.

I'm using this custom headers:

customHeaders:
  - pattern: '**'
    headers:
      - key: api_key
        value: ********
      - key: Access-Control-Allow-Origin
        value: '*'

But doesn't works...

@Phok7, wanted to follow up again with another suggestion if you're still experiencing this. Can you also check to see if you've enabled CORS for your endpoints?

The endpoints are from a third party API and I can't enable CORS.

The problem is that Amplify prevents Angular from running its own proxy since the request first goes through Amplify's rewrite rule and does not reach the Angular proxy.

Thanks @cwomack, I appreciate your help.