4

From my app I want to reach an api. The curl request is:

curl --request POST   https://...    --header 'Authorization: Token ...'   --header 'Accept: application/csv'   --header 'Content-type: application/vnd.flux'   --data '...'

It works and returns data from an InfluxDB instance. The problem ist when I try everything in Angular: I set up an proxy which redirects the requests correctly(I check this in the terminal). But in the web browser (Firefox Developer Edition) I get

POSThttp://localhost:4200/api/
[HTTP/1.1 401 Unauthorized 204ms].

Status 401
Unauthorized
Version HTTP/1.1
Übertragen 350 B (55 B Größe)
Referrer Policy strict-origin-when-cross-origin

The api URL is a https address, same error happens with http. Same happens in the production app.

proxy.conf

{
"/api/*": {
"target": "...",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}

Terminal confirmation:

[HPM] POST /api/ -> correct url

Request in component:

apiurl = '/api/';
data = JSON.stringify('request');
headers:HttpHeaders = new HttpHeaders();;

constructor(private route: ActivatedRoute,
private httpClient: HttpClient) {
this.headers.set('Authorization', 'Token token');
this.headers.set('Content-type', 'application/vnd.flux');
}

getConfig() {
return this.httpClient.request<any>('post',`${this.apiurl}`,
    {
      body: this.data,
      headers: this.headers
    }
 );
}


ngOnInit(): void {

this.getConfig()
.pipe(first())
.subscribe(
 data => {
   console.log(data);
 },
 error => {
   console.log(error);
 });
  }

I would appreciate a lou your ideas, thank you!

Sai Vamsi
  • 817
  • 7
  • 15
John F.
  • 67
  • 1
  • 1
  • 6
  • Please refer to this [link](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default#:~:text=for%20more%20details.-,What%20does%20this%20change%20mean%3F,the%20path%20and%20query%20string.) – Lenzman May 17 '21 at 03:08
  • Hello, thank you a lot for the answer!. I suppose the problem is the different port(from Angular 4200 to thge aapi 80). But what can I do in order to develop properly? I also do not use Chrome but mozilla developer for the development. Anyway in the production aI use the same origin (domain and port). Please share your thoughts on this with me! – John F. May 17 '21 at 05:46
  • For a cross-origin error, you could set up a Proxy in the development setup. EDIT : Oh sorry You have already tried that – Lenzman May 17 '21 at 06:12
  • try adding this to the proxy `"pathRewrite": { "^/api": "" }` after `changeOrgin` – Lenzman May 17 '21 at 06:17
  • 2
    Thank you man! This helped me out. Actually the "Referrer Policy strict-origin-when-cross-origin" was irrelevant. It was just an information which policy is active... Thanky again and all the best! – John F. May 17 '21 at 19:49
  • If the "pathRewrite": { "^/api": "" } worked for you, I can write an answer for this and you can accept it. – Lenzman May 18 '21 at 04:12

1 Answers1

3

You missed "pathRewrite": { "^/api": "" }

Change your proxy configuration from this:

{
 "/api/*": {
   "target": "...",
   "secure": false,
   "logLevel": "debug",
   "changeOrigin": true
 }
}

To this:

{
 "/api/*": {
   "target": "...",
   "secure": false,
   "logLevel": "debug",
   "changeOrigin": true,
   "pathRewrite": { "^/api": "" }
 }
}
Lenzman
  • 1,177
  • 18
  • 30