Need Proxy?

BotProxy: Rotating Proxies Made for professionals. Really fast connection. Built-in IP rotation. Fresh IPs every day.

Find out more

Configure Angular-cli proxy for custom headers in request to backend?

Question

the topic, as I understand it is quite fresh and relevant. Tell me where is my mistake?

So, I did everything as in the documentation:

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Angular-cli version:

....
  "devDependencies": {
    "@angular/cli": "1.2.0",
....

Created the file: proxy.conf.json

{
  "/profile/*": {
    "target": "http://localhost:8888",
    "secure": false,
    "pathRewrite": {
      "^/profile": ""
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

I registered it in package.json

....
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
....

Starting application as follows: npm start

Here ist the start log:

> ng serve --proxy-config proxy.conf.json

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /profile  ->  http://localhost:8888
[HPM] Proxy rewrite rule created: "^/profile" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
Hash: 2f1f9b69df46574b900e
Time: 12544ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 131 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 255 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.79 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

And the problem is definitely not in the backend, because the cors is configured there. I monitor my request with Fiddler.

Here's how it looks now:

OPTIONS http://localhost:8888/profile/data/personal HTTP/1.1
Host: localhost:8888
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
x-ijt: c2q0qqq02it9p2jrk3m6ihbs5u
Access-Control-Request-Headers: content-type,x-auth-token
Accept: */*
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

We are talking about this header: x-auth-token

I also read this topic.

https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server

Any Ideas? Thanks.

Answer

Reposting the answer I posted in that other question.

I had to make a small adjustment based on the above answers, although it seems a bit odd looking at the config now.

This is my proxy.conf.json shown below:

{
  "/api/*": {
    "target": "https://url.com",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {"^/api" : "http://url.com/api"}
  }
}

Basically, I rewrote the path completely. And it works now.

cc by-sa 3.0

See also: