0
이 기사에 설명 된대로 RESTful API를 사용하여 간단한 평균 스택 CRUD 애플리케이션을 구현하는 데 문제가 있습니다. MEAN Stack (Angular 5) CRUD Web Application Example.HTTPClient POST 요청이 Angular 5/Angular Universal에서 작동하지 않습니다.
처음에는 각도 5 (GitHub repo here)를 사용하여 앱을 만들었고 그 기능이 뛰어났습니다. 그런 다음 Angular 5/Angular Universal을 사용하여 앱을 다시 만들려고했는데 문제가 발생하기 시작했습니다. 문제없이 GET/DELETE 요청을 수행 할 수 있습니다. 그러나 POST/PUT 요청을 수행 할 수 없습니다 (ngModel을 사용하여 템플릿 기반 양식을 사용함).
는 기본적으로 양식을 제출 한 후, 내 노드 console.log는 GET request (status 304)을 표시하고, URL 내 입력 필드도 기록되지 않는 것을 믿고 날 리드하는 /book-create?title=&author=이다. 가치가있는 경우, 기록 된 모든 요청은 올바르게로드 된 웹 페이지 인 GET requests (status 304)입니다. Postman에서 백엔드 API를 테스트 한 결과 예상대로 작동합니다.
- 가 보기는 클라이언트에서 렌더링되지 않기 때문에 내 POST 요청이 작동하지 않는 이유는 서버 측 렌더링 않습니다 알아?
- 304 상태 코드이이 문제와 관련이 있습니까?
관련 코드 스 니펫은 아래에 나와 있습니다. 도와 주셔서 감사합니다!
책 create.component.ts
export class BookCreateComponent implements OnInit {
book: any = {};
constructor(private http: HttpClient, private router: Router) { }
saveBook() {
this.http.post('api/book', this.book)
.subscribe(res => {
this.router.navigate(['/books']);
}, err => {
console.log(err);
});
}}
책 create.component.html
<form #bookForm="ngForm" (ngSubmit)="saveBook()">
<input required name="title" [(ngModel)]="book.title" type="text">
<input required name="author" [(ngModel)]="book.author" type="text">
<input type="submit" value="Create">
</form>
server.js
require('zone.js/dist/zone-node'); // COMMENT: Server specific version of Zone.js
const express = require('express');
const path = require('path');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const ngUniversal = require('@nguniversal/express-engine'); // COMMENT: SSR Engine
const appServer = require('./dist-server/main.bundle'); // COMMENT: Server Bundle
const app = express();
const port = process.env.PORT || 3000;
const api = require('./routes/api');
const config = require('./config/database');
mongoose.Promise = require('bluebird');
mongoose.connect(config.database, { useMongoClient: true, promiseLibrary:
require('bluebird') })
.then(() => console.log(`Connected to database ${config.database}`))
.catch((err) => console.log(`Database error: ${err}`));
app.engine('html', ngUniversal.ngExpressEngine({ // COMMENT: Engine Config
bootstrap: appServer.AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', 'dist');
function serverRouter(req, res, next) => {
if (req.url.startsWith('/api')) return next();
res.render('index', { req, res });
}
app.use(morgan('dev'));
app.use(bodyParser.json());
app.get('/', serverRouter); // COMMENT: Server-side rendering of root route
app.use('/api', api);
app.use(express.static(`${__dirname}/dist`));
app.get('*', serverRouter);
// API Error Handler here (not shown)
app.listen(port,() => console.log(`Server started on port ${port}`));
각도 범용을 사용하는 경우 http 클라이언트에 전달되는 URL은 절대적이어야합니다. – David
고마워요! 아쉽게도 절대 URL로 변경해도 문제가 해결되지 않았습니다. – Stan