Bonjour, je bloque depuis hier midi sur l'exercice du quiz 2 du cours "Passez au Fullstack avec Node.js, Express et MongoDB".

Lorsque je lance l'application front avec npm start, quand je clique sur "TEST ROUTES" ça m'affiche "ERROR: Could not create new product!", il y a donc un problème.

Quand je me connecte au localhost:3000, je me retrouve avec "Cannot GET /" à l'écran et une erreur dans la console :
"Content Security Policy: Les paramètres de la page ont empêché le chargement d’une ressource à http://localhost:3000/favicon.ico (« default-src »)."

J'ai recherché un peu et j'ai trouvé qu'on pouvait spécifier le CSP avec res.setHeader("Content-Security-Policy", "default-src.......");

Mais étant débutante je n'ai pas exactement compris comment l'utiliser exactement dans le cadre d'un localhost (comme si c'était un url classique ? possible d'avoir un exemple pour être sûre ? 😅), et si c'est vraiment cet en-tête qui permettra de résoudre mon problème ou s'il vient d'ailleurs...

Désolée si ma question est bête, j'espère quand même que quelqu'un pourra au moins m'éclairer sur le sujet.
Merci d'avance

Fichier app.js

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const Thing = require('./models/thing');
const cors = require('cors');

const app = express();

app.use(cors());

mongoose.connect('mongodb+srv://lunaiden:<pass>@cluster0-yiiry.mongodb.net/test?retryWrites=true&w=majority',
{useNewUrlParsers: true,
useUnifiedTopology: true })
.then(() => console.log('Connectinon à MongoDB réussie !'))
.catch(() => console.log ('Connection à MongoDB échouée !'));

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  next();
});

app.use(bodyParser.json());

app.post('/api/products', (req, res, next) => {
    delete req.body._id;
    const thing = new Thing({
        ...req.body
    });
    product.save()
    .then(() => res.status(201).json({ product: Product }))
    .catch(error => res.statuts(400).json({ error }));
});

app.put('/api/products/:id', (req, res, next) => {
    Thing.updateOne({ _id: req.params.id }, { ...req.body, _id: req.params.id })
    .then(() => res.status(200).json({ message: 'Modified!' }))
    .catch(error => res.status(400).json({ error }));
})

app.delete('/api/products/:id', (req, res, next) => {
    Thing.deleteOne({ _id: req.params.id })
    .then(() => res.status(200).json({ message: 'Deleted!' }));
})

app.get('/api/products/:id', (req, res, next) => {
    Thing.findOne({ _id: req.params.id })
    .then(thing => res.status(200).json({ product: Product }))
    .catch(error => res.status(404).json({ error }));
});

app.get('/api/products', (req, res, next) => {
    Thing.find()
    .then(thing => res.status(200).json({ products: Product[json] }))
    .catch(error => res.status(400).json({ error }));
});


module.exports = app;

Fichier server.js

const http = require('http');
const app = require('./app');

const normalizePort = val => {
    const port = parseInt(val, 10);

    if(isNaN(port)) {
        return val;
    }
    if(port >= 0) {
        return port;
    }
    return false;
};
const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

const errorHandler = error => {
    if (error.syscall !== 'listen') {
        throw error;
    }
    const address = server.address();
    const bind = typeof address === 'string' ? 'pipe ' + address : 'port: ' + port;
    switch (error.code) {
        case 'EACCES':
            console.error(bind + ' requires elevated privileges.');
            process.exit(1);
            break;
        case 'EADDRINUSE':
            console.error(bind + ' is already in use.');
            process.exit(1);
            break;
        default:
            throw error;
    }
};

const server = http.createServer(app);

server.on('error', errorHandler);
server.on('listening', () => {
    const address = server.address();
    const bind = typeof address === 'string' ? 'pipe ' + address : 'port ' + port;
    console.log('listening on ' + bind);
});

server.listen(port);

Fichier thing.js

const mongoose = require('mongoose');

const thingSchema = mongoose.Schema({
    name: { type: String, required: true },
    description: { type: String, required: true },
    price: { type: Number, required: true },
    inStock: { type: Boolean, required: true }
});

module.exports = mongoose.model('Thing', thingSchema);

-
Edité par Lunaiden 3 mars 2020 à 16:11:01

Salut

moi aussi je bloque, sur cet exercice. 
Mais au niveau de l'architecture du projet ...

Les fichier app.js, server.js tu les a mis directement dans le fichier fullstack-activity et thing.js dans le fichier flustack-activity/models ? 

Ou as tu renommer le dossier fullstack-activity en frontend. 
Et tu as mis un dossier backend au même niveau que celui frontend dans lequelle tu inclue app.js, server.js et thing.js

@Tortue_Ninja

Il faut bien renommer fullstack-activity en frontend, puis mettre un dossier backend (avec ton travail dedans) au même niveau que frontend !