I am tryingto consume a public API, but I have a failure answer. I tested with Postman and with browsers (like google chrome and microsoft edge), and I can consume the API, but when I tried to consume the API with my angular app, I don't have a successfully answer 😔
The answer is: "Access to XMLHttpRequest at 'https://bio.torre.co/api/bios/ricovar96?s=fMoC3WTE0B' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
I dont have access to the server, because is a public API, so I cannot put @CrossOrigin(origins = "http://localhost:4200"). This is the error:
and this is the url API: https://bio.torre.co/api/bios/ricovar96?s=fMoC3WTE0B
I made this step but didn't work:
- Create a proxy.conf.json file in the same level of package.json whit this strucuture:
{ "*/api/*":{ "target": "https://bio.torre.co", "secure": false, "changeOrigin": true, "logLevel": "debug", "pathRewrite": {"^/api" : ""} } }
- I Modified the package.json. I added the file I created in the script section like this:
"scripts": { ... "start": "ng serve --proxy-config proxy.conf.json", ... }
- I modified the Service I created like this (in the app.module.ts I set in the imports the HTTPClientModule ):
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class ResumeService { > constructor(private http: HttpClient) { } getUserData(id: string): Observable<any> { return this.http.get<any>(api/bios/ricovar96?s=fMoC3WTE0B"); } }
- I ran npm start.
But I got this answer:
What do you think It is happening?