在使用Angular 8时,可以通过配置代理来解决跨域问题。以下是一个使用代理的示例:
首先,创建一个名为proxy.conf.json的文件,将以下内容复制到文件中:
{ "/api": { "target": "http://backend-api.com", "secure": false, "pathRewrite": { "^/api": "" }, "changeOrigin": true } }
接下来,打开angular.json文件,找到"architect" > "serve" > "options" > "proxyConfig",将其更改为proxy.conf.json的路径。例如:
"proxyConfig": "src/proxy.conf.json"
然后,在应用程序的服务中,使用HttpClient发送HTTP请求。例如,创建一个名为app.service.ts的文件,将以下内容复制到文件中:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' }) export class AppService { constructor(private http: HttpClient) { }
getData() { return this.http.get('/api/data'); } }
最后,在组件中使用该服务来获取数据。例如,创建一个名为app.component.ts的文件,将以下内容复制到文件中:
import { Component, OnInit } from '@angular/core'; import { AppService } from './app.service';
@Component({
selector: 'app-root',
template:
})
export class AppComponent implements OnInit {
data: any;
constructor(private appService: AppService) { }
ngOnInit() { this.appService.getData().subscribe(data => { this.data = data; }); } }
这样,当应用程序运行时,它将使用代理来发送HTTP请求,将所有以/api开头的请求转发到http://backend-api.com,并在组件中显示数据。