Maybe too much to go into here, and maybe this will be one I figure out before I hit "post", but:
In a React/Node thing I have:
node app got these parts up top
Code:
const cors = require('cors');
.
.
.
app.use(cors())
and I have (I don't think the logic/work inside the route really matters as far as this prob is concerned, so maybe just skim that first)
Code:
app.post('/api/editCaption', (req, res) => {
// console.log("what the harpo");
fs.readFile('../solarreact/src/ImageData.json', 'utf8', (err, data) => {
imgDataArr = JSON.parse(data);
console.log(imgDataArr);
console.log("change caption of " + req.body.imgObj + " to " + req.body.newCaption);
imgDataArr.forEach(function(element) {
if (element.family === req.body.imgObj.family && element.childNum === req.body.imgObj.childNum) {
element.caption = req.body.newCaption;
}
});
writeImageData(imgDataArr);
console.log(imgDataArr);
});
});
Which is getting a
Code:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/imgupload. (Reason: CORS request did not succeed).[Learn More]
error in Firefox, but not Chrome.
I have another route
Code:
app.post('/api/deletePic', (req, res) => {
let imgFolder = "../solarreact/public/img/";
let fileName = getFilename(req.body.imgObj);
writeImageData(req.body.jsondata);
fs.unlink(imgFolder + fileName, (err) => {
if (err) {
console.log("error deleting ", imgFolder + fileName, " :", err);
} else {
console.log(imgFolder + fileName, " was deleted");
}
});
let thisFamNum;
let thisChildNum;
let newChildNum;
fs.readdir(imgFolder, (err, files) => {
if (err) {
next(err);
} else {
files.forEach(file => {
thisFamNum = getFamNum(file);
thisChildNum = getChildNum(file);
newChildNum = thisChildNum - 1;
if (newChildNum>=req.body.imgObj.childNum && thisFamNum === req.body.imgObj.family) {
let sel = imgFolder + '/' + file;
let dis = '';
dis = imgFolder + '/' + thisFamNum.toString() + '_' + newChildNum.toString() + '.jpg';
fs.renameSync(sel, dis);
}
});
}
});
res.json({ message: "pic deleted" });
});
Which seems pretty damn similar and works in Firefox and Chrome without throwing that error.
I don't see how the React code would matter and can post more details on those, but the calls look like this:
Code:
axios.post('http://localhost:5000/api/deletePic', data)
.then((res) => {
console.log(res);
});
and
Code:
axios.post('http://localhost:5000/api/editCaption', data) // edit the caption
.then((res) => {
console.log(res);
});
Everything is working in Chrome. My first thought was something to do with headers and Chrome being more forgiving and I've tried all sorts of stuff I've seen on SO or elsewhere like:
Code:
app.use(function(req,res,next) {
res.setHeader("Access-Control-Allow-Origin","*");
res.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
with and without "cors()" or "next" in the app.post in all combos I could guess to no avail.
