[英]My Angular MEAN STACK Application cannot receive/read HTTP Requests from my API?
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
}
您可以使用郵遞員獲得回復,因為在這種情況下不存在跨域問題。
當您嘗試使用瀏覽器獲取響應時,應用程序和 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(跨源資源共享) 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.