dictionary - 角度 6 : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

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

并面临一些问题。目前我正在使用:

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

在 weather.service.ts 如果我想使用

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);
  }
}

但它给我一个错误:

---

(浏览器控制台)

请求的资源上不存在“Access-Control-Allow-Origin” header 。产地' http://localhost:4200 ' 因此不允许访问。

---

(终端)

./src/app/weather.service.ts 中的错误找不到模块:错误:无法解析“/home/nodira/AngularProjects/charts/src/app”中的“rxjs/add/operator/map”

---

我在 Angular 6 : where getting error module "rxjs/add/operator/map" and another error 'map' does not exist on 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));
  }
}

现在我在终端中没有收到任何错误，但我没有看到任何想要的 result在浏览器的控制台中都没有。当我想使用 filter 错误时，我遇到了类似的 Can't resolve rxjs/add/operator/filter 错误。我将衷心感谢您的帮助。提前致谢。

Answer 1

我发现了上面提供的错误消息的一些原因。 rxjs 错误的原因是错误地声明了 map 函数。此链接包含有关声明更改的一些信息:https://www.academind.com/learn/javascript/rxjs-6-what-changed/

1. 需要您更改导入的不同内部结构声明
2. pipe() 作为链接操作符的方法，旧的链接方式他们不会工作

另外，我在想http请求没有得到结果的原因。我认为这可能是因为 http://samples.openweathermap.org 阻止了 http://localhost:4200/ 的 http 请求 像 获取。

---

只要项目有效，我似乎找到了解决方案。当我添加代理后端时，http 问题得到解决。有关代理后端的更多详细信息，请查看:link .如果有人遇到同样的问题，请在此处共享解决方案:

在与 package.json 相同的级别添加一个 proxy.conf.json 文件。它应该看起来像这样:

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

在服务中更新它。

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

用这个命令服务。

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

请随时查看提供这些问题的项目代码 :) 在此 link