web-dev-qa-db-fra.com

Angulaire 6: aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée

Je fais https://coursetro.com/posts/code/126/Let's-build-an-Angular-5-Chart.js-App---Tutorial

et faire face à des problèmes. Actuellement, j'utilise:

Angular CLI: 6.0.8
Node: 10.4.1
OS: linux x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
TypeScript                        2.7.2
webpack                           4.8.3

Dans weather.service.ts si je veux utiliser 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';


@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  constructor(private _http: HttpClient) { }

  dailyForecast() {
    return this._http.get("http://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22").map(result => result);
  }
}

mais ça me donne une erreur: 

(Console de navigation)

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin ' http: // localhost: 4200 ' n'est donc pas autorisé à accéder.

(Terminal)

ERREUR dans ./src/app/weather.service.tsModule introuvable: Erreur: impossible de résoudre le problème 'rxjs/add/operator/map' dans '/ home/nodira/AngularProjects/charts/src/app'

J'ai essayé ce qui suit avec la solution donner dans { angulaire 6: où obtenir le module d'erreur "rxjs/add/operator/map" et une autre erreur "map" n'existe pas sur le type "Observable <Response> ' : 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  constructor(private _http: HttpClient) { }

  dailyForecast() {
    return this._http.get("http://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22").pipe(map(result => result));
  }
}

Maintenant, je ne reçois aucune erreur dans le terminal, mais je ne vois pas non plus de résultat } souhaité dans la console du navigateur. J'avais Can't resolve rxjs/add/operator/filter similaire quand je voulais utiliser l'erreur filter quand je voulais. J'apprécierais vraiment votre aide ... Merci d'avance.

dictionaryrxjshttp-getangular6
3
Nodirabegimxonoyim

J'ai découvert quelques raisons des messages d'erreur que j'ai fournis ci-dessus. La raison de l'erreur avec rxjs était de déclarer une fonction de carte à tort. Ce lien contient des informations sur les changements de déclaration: https://www.academind.com/learn/javascript/rxjs-6-what-changed/

  1. Structure interne différente nécessitant la modification de vos déclarations d'importation
  2. pipe () en tant que méthode pour chaîner vos opérateurs, l'ancienne méthode de chaînage les ne fonctionnerait pas

De plus, je pense à la raison pour laquelle je n’ai pas obtenu le résultat de http request. Je pense que c'est peut-être parce que http://samples.openweathermap.org a bloqué http://localhost:4200/ pour http requests comme get.

Il semble que j'ai trouvé une solution tant que le projet fonctionne. Lorsque j'ai ajouté un problème de serveur proxy avec http, je suis résolu. Pour des informations plus détaillées sur le serveur proxy, veuillez vérifier: link . Partager la solution ici au cas où quelqu'un rencontrerait le même problème: 

Ajoutez un proxy.conf.json file au même niveau que package.json. Cela devrait ressembler à ceci:

{
"/api": {
"target": "http://samples.openweatherm...",
"secure": false,
"pathRewrite": {
"^/api": ""
},
"changeOrigin": true
}
}

Mettre à jour ceci dans le service.

dailyForecast() {
return this._http.get("/api/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22")
.map(result => result);
}

Servir avec cette commande.

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

N'hésitez pas à voir le code de projet pourvu que ces problèmes :) dans ce lien

1
Nodirabegimxonoyim

Le problème ne vient pas du client de l'application, si vous voulez le résoudre définitivement, vous devez le résoudre à l'arrière-plan.

0
Blue Like