Proxies not working

Ionic Framework
1

I am attempting to use service proxies as described in Service Proxies. However, I cannot get it to work at all. Note that is just browser dev/test - no devices involved. My configuration:

ionic.config.json:

{
  "name": "cgmobile",
  "integrations": {
    "capacitor": {}
  },
  "type": "react",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://avalidhost.net:8090/"
    }
  ]
}

If I try the following:

curl localhost:8100/api/calendar

…or try to fetch the same URL from within my app, I just get the root html index file back. Note that this is a react app - a lot of the examples I can find online are angular… don’t see that matters though.

Configuration:
ionic cli version: 6.6.0
npm version: 6.13.4
node version: 12.15.0

Bits of output from ionic serve:

[react-scripts] ℹ ｢wds｣: Project is running at http://172.31.255.181/
[react-scripts] ℹ ｢wds｣: webpack output is served from 
[react-scripts] ℹ ｢wds｣: Content not from webpack is served from /home/john/Development/ionic/cgmobile/public
[react-scripts] ℹ ｢wds｣: 404s will fallback to /
[react-scripts] Starting the development server...
[react-scripts]


[INFO] Development server running!
       
       Local: http://localhost:8100
       
       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

Dependencies section of package.json:

  "dependencies": {
    "@capacitor/core": "2.0.1",
    "@ionic/react": "^5.0.7",
    "@ionic/react-router": "^5.0.7",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@testing-library/user-event": "^10.1.0",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.13.2",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/react-router": "^5.1.5",
    "@types/react-router-dom": "^5.1.4",
    "ionicons": "^5.0.1",
    "moment": "^2.24.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "rxjs": "^6.5.5",
    "typescript": "3.8.3",
    "weather-underground-icons": "^1.0.0"
  },
2

Did you figure this out? I have the same problem.

3

No progress on solving it, no. I did find a wordaround - since I am using react, ionic is using the create-react-app scripts under the hood. That has a (limited) proxy capability - its described here. Its not very fined grained in its control, but it was sufficient for me to move ahead. Unfortunate the ionic one seems to be completely broken!

4

Thanks for the update. Very frustrating! I didn’t think about the one built into create-react-app. I needed to move forward so I used local-cors-proxy. Hopefully it will be fixed soon and we can revert back to the official proxy.

5

I end up using

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

so that I can request api.

As of 9/12/2001 there is no working solution for ionic react wpa projects that I was able to solve with a proxy or ionic configuration.

This does not work:

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

as proposed as documented for ionic v3

or this

this is old information:

configuring firebase does work in production
https://firebase.google.com/docs/hosting/full-config#rewrite-functions
not useful for development while using firebase server or emulator.
It appears only ionic serve does hot reload.

if you will be using firebase for api this solution worked for me: