我的 Angular MEAN STACK 应用程序无法从我的 API 接收/读取 HTTP 请求？答案

【问题标题】：My Angular MEAN STACK Application cannot receive/read HTTP Requests from my API?我的 Angular MEAN STACK 应用程序无法从我的 API 接收/读取 HTTP 请求？
【发布时间】：2020-05-07 18:34:18
【问题描述】：

error 首先，我创建了一个可以获取和发布的 API： more error

const express = require('express');
const router = express.Router();
const model = require('../models/taskModel');


router.get('/tasks', (req, res) => {
model.find()
    .then((task) => {
        res.json(task);
        console.log(task);
    })
    .catch((err) => {
        console.log(`Error: ${err}`);
    })
})


router.post('/add', (req, res) => {
const userData =
{
    title: req.body.title,
    description: req.body.description,
    isDone: req.body.isDone
}

const newUser = new model(userData);

newUser.save()
    .then(() => res.json('User Added!'))
    .catch((err) => {
        console.log(`Cannot add user: ${err}`);
    })

})

我有一个如下所示的服务文件：

import { Injectable } from '@angular/core';
import { taskData } from '../Models/task-interface';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';


// Http
const httpOptions = {
  headers: new HttpHeaders({ 'Content-type': 'application/json' })
}

@Injectable({
  providedIn: 'root'
})
export class RequestsService {

  tasks: taskData[];

  key: string = `http://localhost:5000/api/tasks`;

  constructor(private http: HttpClient) { }

  getTasks(): Observable<taskData[]> {
  return this.http.get<taskData[]>(this.key);
}

}

然后我从组件内的服务模块调用“getTasks()”函数：

import { Component, OnInit } from '@angular/core';

import { RequestsService } from '../../Services/requests.service';

import { taskData } from '../../Models/task-interface';

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css']
})
export class TasksComponent implements OnInit {

  tasks: taskData[];

  constructor(private reqService: RequestsService) {

  }

  ngOnInit() {
   this.reqService.getTasks().subscribe((data: taskData[]) => {
   this.tasks = data;
   console.log(`This is my log: ${this.tasks}`);
    })
  }

}

在我的 component.html 中，我使用 ngFor 来完成任务并从我的 mongoDB 数据库中获取每个任务：

   <div class="d-flex justify-content-around align-items-center" *ngFor="let task of tasks">

                    <input type="checkbox" name="" id="">

                    <h2 class="text-center">{{task.title}}</h2>
                    <p class="text-center">{{task.description}}</p>

                    <button class="btn btn-danger">Delete Task</button>
                </div>

这是我在运行此应用程序时收到的错误消息。（ps get 和 post 请求在邮递员中工作，但我的 Angular 应用程序显然无法读取）

忘记展示我的模型：

export interface taskData {
    title: string,
    description: string,
    isDone: boolean
}

【问题讨论】：

它是否在 Postman 上运行，并且您在浏览器上遇到的错误与 CORS 有关？

标签： javascript html angular web

【解决方案1】：

您可以使用邮递员获得响应，因为在这种情况下不存在跨域问题。

当您尝试使用浏览器获取响应时，应用程序和 api 的来源存在差异，因此会导致 CORS 问题。

您可以使用 'cors' npm 包解决此问题。

将其安装为本地依赖项：

 npm install cors --save

将其作为中间件添加到应用中。

添加cors后更新代码：

const express = require('express');
const router = express.Router();
const model = require('../models/taskModel');
const cors = require('cors');
let app = express();

app.use(cors());

router.get('/tasks', (req, res) => {
model.find()
 .then((task) => {
    res.json(task);
    console.log(task);
 })
 .catch((err) => {
    console.log(`Error: ${err}`);
 })
})

router.post('/add', (req, res) => {
const userData =
 {
   title: req.body.title,
   description: req.body.description,
   isDone: req.body.isDone
 }

const newUser = new model(userData);

newUser.save()
 .then(() => res.json('User Added!'))
 .catch((err) => {
    console.log(`Cannot add user: ${err}`);
 })

这将为您的节点应用启用 CORS（跨域资源共享）。

这是How to enable cors nodejs with express?的副本

【讨论】：