Solved
I have been working on this program since 07:00. This has been driving me crazy. I have written multiple full stack web apps and have not had this problem.
Basically I have a form in html that allows a user to input data. Whenever the submit button is clicked, it sends that data to a collection in mongoDB. I have tested this in postman and it works. However, when I run the program through a webbrowser, I get this error:
XMLHttpRequest cannot load http://localhost:8080/articles/addArticle. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.
I tried installing CORS and configuring the endpoint
I tried going into the javascript file and changing the
This is my JavaScript file
alert('JS is linked to page!');
function Article(id = 1, title = "", authors="", content = "", genre = "", date = 1497484623) {
console.log("JavaScript file loaded successfully");
var self = this;
self.Id = id;
self.Title = title;
self.Authors = authors;
self.Content = content;
self.Genre = genre;
self.Date = date;
self.Save = function() {
var settings = {
url: 'http://localhost:8080/articles/addArticle',
method: 'POST',
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json");
}
};
var myData = {
"Id" : self.Id,
"Title": self.Title,
"Authors": self.Authors,
"Content": self.Content,
"Genre": self.Genre,
"Date": self.Date
};
settings.data = myData;
$.ajax(settings).done(function(article) {
var myArticle = new Article(article.Id, article.Title, article.Authors,
article.Content, article.Genre, article.Date);
});
};
}
function addArticle(Article) {
alert('addArticle Activated');
var settings = {
url: 'http://localhost:8080/articles/addArticle',
method: 'POST',
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json");
}
};
var myData = {
"Title": Article.Title,
"Authors" : Article.Authors,
"Content": Article.Content,
"Genre" : Article.Genre,
"Date": Article.Date
};
settings.data = myData;
$.ajax(settings).done(function(Article) {
var myArticle = new Article(article.Id, article.Title, article.Authors, article.Content,
article.Genre, article.Date);
console.log("Article Created");
});
}
$(document).ready(function() {
$(document).on("submit", "#add-article", function(e) {
e.preventDefault();
alert('submit Activated');
var title, authors, genre, content;
title = $("#Title").val();
director = $("#Authors").val();
rating = $("#Genre").val();
notes = $("#Content").val();
var myArticle = new Article(0, title, authors, genre, content, 1497484623);
alert(myArticle.Title);
addArticle(myArticle);
$("#add-article")[0].reset();
$("#title").focus();
});
});
/*function CreateSuccessRow(Article) {
var successDataRow = `<tr id="Article-${Article.Id}"><td>${Article.Title}</td>
<td>${Article.Authors}</td>
<td>${Article.Genre}</td>
Due to popular demand, this is the server-side code:
package com.stereoscopics.app.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import com.stereoscopics.app.models.Article;
import com.stereoscopics.app.repo.ArticleRepo;
@RestController
@RequestMapping("/articles")
public class ArticleController {
private ArticleRepo articleRepo;
@Autowired
public ArticleController(ArticleRepo articleRepo) {
this.articleRepo = articleRepo;
}
@RequestMapping(value = "/findall", method = RequestMethod.GET)
@ResponseBody
public List<Article> findall() {
return articleRepo.findAll();
}
@RequestMapping(value = "/addArticle", method = RequestMethod.POST)
@ResponseBody
public Article addArticle(@RequestBody Article newArticle) {
articleRepo.save(newArticle);
return newArticle;
}
}
I have no idea how to fix this. Please help.
UPDATE
This still isn't working. I've updated the code as per some suggestions and I'm either doing it wrong or it's incorrect. The changes are shown below:
@RestController
@RequestMapping("/articles")
public class ArticleController {
private ArticleRepo articleRepo;
@Autowired
public ArticleController(ArticleRepo articleRepo) {
this.articleRepo = articleRepo;
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.addHeader("Access-Control-Allow-Origin", "*");
}
@RequestMapping(value = "/findall", method = RequestMethod.GET)
@ResponseBody
public List<Article> findall() {
return articleRepo.findAll();
}
@RequestMapping(value = "/addArticle", method = RequestMethod.POST)
@ResponseBody
public Article addArticle(@RequestBody Article newArticle, final
HttpServletResponse response) {
response.addHeader("Access-Control-Allow-Origin", "*");
articleRepo.save(newArticle);
return newArticle;
}
}
THIS IS NOT SOLVED YET
