【发布时间】:2019-11-01 18:06:55
【问题描述】:
我需要 MEAN 堆栈方面的帮助。每当我的浏览器加载时显示错误“GET http://localhost:4000/api/admin/view400 (Bad Request)”但是当我打邮递员时它工作正常。不明白我缺少什么
Component Ts
})
export class ViewAllComponent implements OnInit {
users: any = [];
//searchUser;
constructor(private adminServiceService: AdminServiceService) { }
ngOnInit() {
this.adminServiceService.getUsers()
.subscribe((data: any) => {
console.log(data.data);
this.users = data.data;
console.log(this.users);
});
}
}
Component Html
<div class="container">
<div class="row">
<!-- <div class="search-user" style="margin:5px;">
<input class="form-control" type="text" name="search" [(ngModel)]="searchUser" autocomplete="off" placeholder="Search By Name">
</div> -->
<div>
<a [routerLink]="['/register']" class="btn btn-primary" style="margin:5px;">Add New User</a>
</div>
<table class="table table-striped" >
<thead>
<tr>
<td>User Name</td>
<td>User Email</td>
<td>User Phone</td>
<td colspan="2">Actions</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.UserName }}</td>
<td>{{ user.UserEmail }}</td>
<td>{{ user.userPhone }}</td>
<td><a href="#" class="fa fa-edit"></a></td>
<td><a href= "#" class="fa fa-trash"></a>
<td><a href="#" class="fa fa-eye"></a></td>
<!-- <td><button type="button" class="btn btn-xs " (click)="approvalPendingRequest(user._id)">
<i [ngClass]="['fa', user.IsActive ? 'fa-lock' : 'fa-unlock']" aria-hidden="true"></!-->
<!-- </button> -->
<!-- </td> -->
</tr>
</tbody>
</table>
</div>
</div>
adminservice.ts
import { map } from "rxjs/operators";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { Injectable } from "@angular/core";
@Injectable({
providedIn: "root"
})
export class AdminServiceService {
uri = "http://localhost:4000/api/admin";
constructor(private http: HttpClient) {}
// save Admin in Databse
addAdmin(value) {
return this.http.post(`${this.uri}/add`, value);
}
getUsers() {
return this.http.get(`${this.uri}/view`);
// .pipe(map((res: Response) => res.json()));
}
}
Server.js
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const cors = require("cors");
const mongoose = require("mongoose");
const nodemailer = require("nodemailer");
const flash = require("express-flash-messages");
const routers = require("./Router/Router");
const config = require("./DB");
mongoose.Promise = global.Promise;
mongoose.connect(config.DB, { useNewUrlParser: true }).then(
() => {
console.log("Database Connected");
},
err => {
console.log("Database is not connected");
}
);
const app = express();
app.use(flash());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
app.use("/api", routers);
let port = process.env.PORT || 4000;
app.listen(port, () => {
console.log("Listing On Port", +port);
});
Controllers.js
const User = require('../Models/User');
exports.allUser = function(req, res){
User.find({}, function (err, user){
if (err){
res.status(400).json({status:false, 'err':err})
}
else{
res.status(400).json({status:true, 'data': user})
}
})
}
Router
// Get All Users
router.get('/admin/view', viewAllUsersCtrl.allUser)
当我尝试使用 http.get 运行代码时,它返回 400 错误请求。我尝试多次更改 http 标头内容类型,但没有成功,以及许多其他无果的解决方案尝试。请帮帮我:(
谢谢!
【问题讨论】:
-
你能检查开发者控制台吗?您的问题可能与 cors 有关
-
我认为问题出在 API 方面。据我所知,您发布的代码看起来还不错...
-
只是做:
app.use((req,res,next)=> { res.header('Access-Control-Allow-Origin': '<your-frontend-server-url:port'); next();});,这是 cors 问题,邮递员不是浏览器,这就是为什么发出该请求没有问题,但浏览器具有某些安全方面,如跨域、同源维护安全的东西 -
我把所有的代码都贴出来了。
-
启用 cors 或使用代理:)