当通过 angular httpClient 访问时，使用 python 的 Flask rest api 会产生空白屏幕

编程问答 2022-05-16

问题描述

我正在尝试构建一个基本的rest api，它在flask（python）中返回json，并尝试将其托管在heroku上，以便我可以从angular httpClient访问该api。 这是heroku api

https://testmyak.herokuapp.com/projects

问题是在尝试使用 angular 的 httpClient 访问 api 时，会显示一个空白页面。

angular 代码没有任何错误，因为从 json-placeholder 网站访问任何其他虚假 api 并且它完美地填充了页面。

./app.py

from flask import Flask,jsonify
app=Flask(__name__)

@app.route('/projects')
def projects():
    x=[]
    x.append({"name":"Debal","gender":"male"})
    x.append({"name":"Debdut","gender":"female"})
    return jsonify(x)

if __name__=='__main__':
    app.run()

./procfile

web: gunicorn app:app

./requirements.txt

click==7.1.2
Flask==1.1.2
gunicorn==20.0.4
itsdangerous==1.1.0
Jinja2==2.11.3
MarkupSafe==1.1.1
Werkzeug==1.0.1

这是有角度的侧面代码 ./src/app/customer.service.ts


import { Injectable } from '@angular/core';
import { HttpClient } from
'@angular/common/http';
import { ICustomer } from './customer';
import { Observable } from 'rxjs';

@Injectable()

export class CustomerService {
    _url:string='https://testmyak.herokuapp.com/projects';

    constructor(private ht:HttpClient) { }
    getCustomers():Observable<ICustomer[]>{
    return this.ht.get<ICustomer[]>(this._url);
  }
}

.src/app/customer.ts

export interface ICustomer{
    gender:string,name:string
}

.src/app/app.component.ts

import { Component } from '@angular/core';
import { CustomerService } from
'./customer.service';

@Component({
    selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'my-app';
    myL:any[];
    constructor(private _s:CustomerService){}
    ngOnInit(){
     this._s.getCustomers().subscribe(data=>this.myL=data);

    }
}

./src/app/app.module.ts

import { NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CustomerService } from
'./customer.service'
import { HttpClientModule } from
'@angular/common/http';

@NgModule({
    declarations: [
      AppComponent
    ],imports: [
      browserModule,HttpClientModule
    ],providers: [CustomerService],bootstrap: [AppComponent]
})
export class AppModule { }

请建议我应该在我的代码中进行的更改，以使 api 可以在 angular 中使用 httpClient 访问

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularflaskflask-restfuljsonifypython