Angular 6: 请求的资源上没有 'Access-Control-Allow-Origin' header

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'

我在中尝试了以下解决方案：

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 函数。 link 有一些关于声明更改的信息：https://www.academind.com/learn/javascript/rxjs-6-what-changed/

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

另外，我在想http request没有得到结果的原因。我认为这可能是因为 http://samples.openweathermap.org 为 http requests 屏蔽了 http://localhost:4200/ 就像 get.

看来我找到了只要项目有效的解决方案。当我添加代理后端时，http 问题得到解决。有关代理后端的更多详细信息，请查看：link。在这里分享解决方案以防有人遇到同样的问题：

在package.json的同一级别添加一个proxy.conf.json file。它应该看起来像这样：

{
"/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

Answer 2

不是客户端的问题，如果要彻底解决，还是得在后台解决

Angular 6: 请求的资源上没有 'Access-Control-Allow-Origin' header

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

dictionary

rxjs

http-get

angular6