Request is presenting Cross-Origin request Blocked in app Reactjs
I am developing an application in React and previously created a restful API with node and express, in my api I added The cors module const cors = require('cors');
and added it at startup to allow the requests, until everything is right, the problem and when I move to the react application, where I also added the axios module const axios = require("axios");
to treat the requests made by the application and thus avoid Cross-Origin but still it returns me the even.
When I make a query in another API the application can bring me the data, I do not know if the reason and because the two are running on the same machine.
I am grateful for the attention of everyone who can help me! :)
Excerpt Reactjs
axios.get("http://localhost:3001/api/MarcodeContainers").then(function (resposta) {
var teste = resposta.data;
console.log(teste);
});
Express nodejs bootstrap
const http = require('http');
const express = require('express');
const morgan = require('morgan');
const webServerConfig = require('../config/web-server.js');
const router = require('./router');
const cors = require('cors');
let httpServer;
function initialize() {
return new Promise((resolve, reject) => {
const app = express();
app.use(cors());
httpServer = http.createServer(app);
app.use(morgan('combined'));
app.use(express.json({
reviver: reviveJson
}));
app.use('/api', router);
httpServer.listen(webServerConfig.port)
.on('listening', () => {
console.log(`Web server ouvindo em localhost:${webServerConfig.port}`);
resolve();
})
.on('error', err => {
reject(err);
});
});
}
1 answers
Thanks to everyone with their answers, but apparently I managed to find the solution, in a question here on stack. follow the link request with Axios
"proxy":"http://localhost:3001/api",
I added the above line of code in my package.json and worked correctly, performed the request without presenting the CROS message. I hope it continues like this after performing some modules update.