Angular 6：请求的资源上不存在“Access-Control-Allow-Origin”标头

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”标头。 Origin '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 request 得到结果的原因。我认为这可能是因为http://samples.openweathermap.org 阻止了http://localhost:4200/ 为http requests 喜欢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

请在linklink中查看提供这些问题的项目代码:)

Answer 2

问题不是来自应用客户端，如果你想彻底解决它，你必须在后端解决它