0
J'ai un problème avec le système de ticket. Le ticket de publication fonctionne mais le ticket de commentaire ne fonctionne pas. Erro: Impossible de charger http://localhost:3977/api/tickets/comment: Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. L'origine 'http://localhost:4200' n'est donc pas autorisée. La réponse a un code d'état HTTP 400.L'appel API ne fonctionne pas sur Angular 4. Aucun en-tête 'Access-Control-Allow-Origin', 400
Suivez le code: Frontend:
// Function to create new ticket form
createNewTicketForm() {
this.form = this.formBuilder.group({
// Title field
title: ['', Validators.compose([
Validators.required,
Validators.maxLength(50),
Validators.minLength(5),
this.alphaNumericValidation
])],
// Body field
body: ['', Validators.compose([
Validators.required,
Validators.maxLength(500),
Validators.minLength(5)
])]
})
}
// Create form for posting comments
createCommentForm() {
this.commentForm = this.formBuilder.group({
comment: ['', Validators.compose([
Validators.required,
Validators.minLength(1),
Validators.maxLength(200)
])]
})
}
// Enable the comment form
enableCommentForm() {
this.commentForm.get('comment').enable(); // Enable comment field
}
// Disable the comment form
disableCommentForm() {
this.commentForm.get('comment').disable(); // Disable comment field
}
// Enable new ticket form
enableFormNewTicketForm() {
this.form.get('title').enable(); // Enable title field
this.form.get('body').enable(); // Enable body field
}
// Disable new ticket form
disableFormNewTicketForm() {
this.form.get('title').disable(); // Disable title field
this.form.get('body').disable(); // Disable body field
}
// Validation for title
alphaNumericValidation(controls) {
const regExp = new RegExp(/^[a-zA-Z0-9 ]+$/); // Regular expression to perform test
// Check if test returns false or true
if (regExp.test(controls.value)) {
return null; // Return valid
} else {
return { 'alphaNumericValidation': true } // Return error in validation
}
}
// Function to display new ticket form
newTicketForm() {
this.newPost = true; // Show new ticket form
}
// Reload tickets on current page
reloadTickets() {
this.loadingTickets = true; // Used to lock button
this.getTickets(); // Add any new tickets to the page
setTimeout(() => {
this.loadingTickets = false; // Release button lock after four seconds
}, 4000);
}
// Function to post a new comment on ticket post
draftComment(id) {
this.commentForm.reset(); // Reset the comment form each time users starts a new comment
this.newComment = []; // Clear array so only one post can be commented on at a time
this.newComment.push(id); // Add the post that is being commented on to the array
}
// Function to submit a new ticket post
onTicketSubmit() {
this.processing = true; // Disable submit button
this.disableFormNewTicketForm(); // Lock form
// Create ticket object from form fields
const ticket = {
title: this.form.get('title').value, // Title field
body: this.form.get('body').value, // Body field
createdBy: this.username // CreatedBy field
}
// Function to save ticket into database
this._ticketService.newTicket(this.token, ticket).subscribe(data => {
// Check if ticket was saved to database or not
if (!data.success) {
this.messageClass = 'alert alert-danger'; // Return error class
this.message = data.message; // Return error message
this.processing = false; // Enable submit button
this.enableFormNewTicketForm(); // Enable form
} else {
this.messageClass = 'alert alert-success'; // Return success class
this.message = data.message; // Return success message
this.getTickets();
// Clear form data after two seconds
setTimeout(() => {
this.newPost = false; // Hide form
this.processing = false; // Enable submit button
this.message = false; // Erase error/success message
this.form.reset(); // Reset all form fields
this.enableFormNewTicketForm(); // Enable the form fields
}, 2000);
}
});
}
// Function to go back to previous page
goBack() {
window.location.reload(); // Clear all variable states
}
// Function to get all tickets from the database
getTickets() {
// Function to GET all tickets from database
this._ticketService.getTickets(this.token).subscribe(data => {
this.ticketPosts = data.tickets; // Assign array to use in HTML
});
}
// Function to post a new comment
postComment(id) {
this.disableCommentForm(); // Disable form while saving comment to database
this.processing = true; // Lock buttons while saving comment to database
const comment = this.commentForm.get('comment').value; // Get the comment value to pass to service function
// Function to save the comment to the database
this._ticketService.postComment(this.token, comment).subscribe(data => {
this.getTickets(); // Refresh all tickets to reflect the new comment
const index = this.newComment.indexOf(id); // Get the index of the ticket id to remove from array
this.newComment.splice(index, 1); // Remove id from the array
this.enableCommentForm(); // Re-enable the form
this.commentForm.reset(); // Reset the comment form
this.processing = false; // Unlock buttons on comment form
if (this.enabledComments.indexOf(id) < 0) this.expand(id); // Expand comments for user on comment submission
});
}Backend:
function saveTicket(req, res){
\t if (!req.body.title) {
res.json({ success: false, message: 'Ticket title is required.' }); // Return error message
} else {
// Check if ticket body was provided
if (!req.body.body) {
res.json({ success: false, message: 'Ticket body is required.' }); // Return error message
} else {
// Create the ticket object for insertion into database
const ticket = new Ticket({
title: req.body.title, // Title field
body: req.body.body, // Body field
createdBy: req.body.createdBy // CreatedBy field
});
ticket.save((err, ticketStored) => {
// Check if error
if (err) {
// Check if error is a validation error
if (err.errors) {
// Check if validation error is in the title field
if (err.errors.title) {
res.json({ success: false, message: err.errors.title.message }); // Return error message
} else {
// Check if validation error is in the body field
if (err.errors.body) {
res.json({ success: false, message: err.errors.body.message }); // Return error message
} else {
res.json({ success: false, message: err }); // Return general error message
}
}
} else {
res.json({ success: false, message: err }); // Return general error message
}
} else {
res.json({ success: true, message: 'Ticket Salvo' }); // Return success message
}
});
}
}
};
function saveComment(req, res){
\t // Check if comment was provided in request body
if (!req.body.comment) {
res.json({ success: false, message: 'No comment provided' }); // Return error message
} else {
// Check if id was provided in request body
if (!req.body.id) {
res.json({ success: false, message: 'No id was provided' }); // Return error message
} else {
// Use id to search for ticket post in database
Ticket.findOne({ _id: req.body.id }, (err, ticket) => {
// Check if error was found
if (err) {
res.json({ success: false, message: 'Invalid ticket id' }); // Return error message
} else {
// Check if id matched the id of any ticket post in the database
if (!ticket) {
res.json({ success: false, message: 'Ticket not found.' }); // Return error message
} else {
// Grab data of user that is logged in
User.findOne({ _id: req.decoded.userId }, (err, user) => {
// Check if error was found
if (err) {
res.json({ success: false, message: 'Something went wrong' }); // Return error message
} else {
// Check if user was found in the database
if (!user) {
res.json({ success: false, message: 'User not found.' }); // Return error message
} else {
// Add the new comment to the ticket post's array
ticket.comments.push({
comment: req.body.comment, // Comment field
commentator: user.username // Person who commented
});
// Save ticket post
ticket.save((err, ticketStored) => {
// Check if error was found
if (err) {
res.json({ success: false, message: 'Something went wrong.' }); // Return error message
} else {
res.json({ success: true, message: 'Comment saved' }); // Return success message
}
});
}
}
});
}
}
});
}
}
};
Routes:
api.post('/ticket', md_auth.ensureAuth, TicketController.saveTicket);
api.post('/tickets/comment/', md_auth.ensureAuth, TicketController.saveComment);Quelqu'un m'aider? Ragards, Santana Marcos
J'ai essayé mais pas travaillé. Je crois que ce problème est en backend, un problème similaire et le résoudre, mais celui-ci je n'ai pas de succès –
Et que disent les autres appels API (comme POST/ticket)? – dhilt
Le ticket fonctionne bien. service de suivi du ticket: retour this._http.get (this.url + '/ billets', {têtes: têtes}) \t \t \t \t \t \t .map (res => res.json()); \t} –