Question

这是我的第一篇帖子，如果我需要添加任何屏幕截图或代码段，请告诉我。

我最近使用Angular 2 CLI创建了一个新应用。我能够通过模拟加载数据，但我仍然在努力解决如何连接到最终API，同时仍然使用CLI提供的开发服务器来实现＆＃34; live＆＃34;测试变化。

我目前的标准CLI端口为4200，快速后端为8181.

在关注获取调用的角度文档时，我遇到了问题，因为我的API调用是8181端口，浏览器控制台错误：

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:4200＆＃39;因此不允许访问。

注意 - 已选中Angular 2 cli with Express js，但似乎无法解决我的确切问题/问题

在API连接到快速服务器时利用开发服务器的正确方法是什么？非常感谢提前！

服务：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';
import { Sport } from './sport';

@Injectable()
export class SportService {
private sportsUrl = 'http://localhost:8181/sports'; //URL to web API
constructor(private http: Http) { }
getSports(): Promise<Sport[]> {
    return this.http.get(this.sportsUrl)
        .toPromise()
        .then(response => response.json().data as Sport[])
        .catch(this.handleError);}
private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
}
}

成分：

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { Sport } from './sport';
import { SportService } from './sport.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [SportService]})

export class AppComponent implements OnInit {
ngOnInit(): void {
    this.getSports();}
    title = 'Olympics';
    constructor(private sportService: SportService) { }
sports: Sport[];
getSports(): void {
    this.sportService.getSports().then(sports => this.sports = sports);
}
}

Answer 1

您需要配置代理。使用以下内容创建文件proxy-conf.json（假设您的快速服务器中的端点包含readObject()）：

/api

按如下方式启动Angular CLI应用程序：

{  
  "/api": {    
     "target": "http://localhost:8181",
    "secure": false  
  }
}

Angular 2通过CLI安装Express

1 个答案: