I'm working on a pretty straightforward project for school. Me and my teammate chose AWS-Cloud9 as our platform, which I learned to use on the fly as we progressed. My job is the scripting. I have a NodeJS backend using Express to query my DB, and I have client side JS to send a post with form data to the backend. For reasons I don't understand, I'm getting the following error: Cross-Origin Read Blocking (CORB) blocked cross-origin response /Address of my project/search.js with MIME type text/html
I've been all up and down the internet for the last 8 hours, and I can't find a solution that works. I tried adding the cors package to my backend, I tried manipulating both the client side and backend headers
Client Side
document.getElementById("search_form").onsubmit = function(event) {
var val = document.getElementById("search_bar").textContent;
var data = JSON.stringify(val);
var fetchParams = {
headers: {
'Access-Control-Allow-Origin': '*',
'User-Agent': 'JDevo/1.0',
'Content-Type': 'application/json',
},
body: data,
method: 'POST',
mode: 'cors'
};
window.fetch('/*c9 address of my project*//queryDB.js/', fetchParams)
.then(res => function(res) {
document.getElementById("main_page").style.display = "none";
document.getElementById("results_page").style.display = "block";
if (res.status !== 200) {
document.getElementById("dummy").innerHTML = "There was a problem with the response";
return;
}
var games = JSON.parse(res.body);
document.getElementById("dummy").innerHTML = games;
});
event.preventDefault();
}
Backend
var mysql = require('mysql');
var express = require("express");
var cors = require('cors');
var app = express();
app.use(cors());
var con = mysql.createConnection({/*DB params*/
});
app.post('/*c9 project address*//queryDB.js/', function(req, res) {
//var searchItem = req.body.query;
var searchItem = 'sekiro';/*testing backend with locked value to make sure a response is being sent*/
con.connect(function(err) {
if (err) throw err;
console.log("Connected");
var sql = 'Select * FROM gamesMerged WHERE gameName LIKE "%' + searchItem + '%";';
con.query(sql, function(err, result) {
if (err) throw err;
console.log(result);
res.status(200).json(JSON.stringify(result));
});
});
});
app.listen(3000);
The expectations would be the post successfully pulled a response, which would then lead to the main page div hiding as the results page div pops up, with the "dummy" div serving as a response area to display either a message indicating that the backend failed it's request, or otherwise display the response object. This is a testing scenario, once I'm passed this hurdle, I'll be parsing successfully returned response objects and manipulating the response page more accurately
