Tengo una aplicación React (localhost:3000) y una aplicación Node (localhost:3001) para ejecutar un sistema simple. El problema es que recibo el error Access to XMLHttpRequest at 'localhost:3001/app' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
Lo he intentado con app.use(cors()) y también con las opciones de cors como se muestra a continuación. Todavía recibo el error anterior.
Aplicación de nodo.js
const express = require('express'); const app = express(); const cors = require('cors'); const corsOptions = { origin: 'http://localhost:3000/', credentials: true, optionSuccessStatus: 200 } app.use(cors(corsOptions)); app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', "http://localhost:3000"); res.header('Access-Control-Allow-Headers', true); res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); next(); }); app.use(express.json()); app.get('/app', (req, res) => { res.send({result: "hello"}); }); module.exports = app;Reaccionar aplicación.js
import React, { Component } from "react"; import axios from 'axios'; class App extends Component { componentDidMount(){ this.runInstance(); } runInstance = () => { axios.get(`localhost:3001/app`) .then(res => { console.log("res", res); }) .catch(err => { console.log("AXIOS ERROR:", err); }) } render() { return(<div></div>) } } export default App;¿Como puedo resolver esto?
Está utilizando un puerto diferente al definido en corsOptions , intente como se muestra a continuación.
// app.js ... runInstance = () => { axios.get(`http://localhost:3000/app`) .then(res => { console.log("res", res); }) .catch(err => { console.log("AXIOS ERROR:", err); }) } ...Actualizar:
Cambie todas las referencias a 3000 para que sean 3001, de modo que su configuración de CORS coincida con la solicitud que está tratando de realizar.
const corsOptions = { origin: 'http://localhost:3001/', credentials: true, optionSuccessStatus: 200 } ... app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', "http://localhost:3001"); ... });Ya que usas nodejs
instalando cors
npm install corsDespués
var express = require('express') var cors = require('cors') var app = express() app.use(cors()) app.get('/products/:id', function (req, res, next) { res.json({msg: 'This is CORS-enabled for all origins!'}) }) app.listen(80, function () { console.log('CORS-enabled web server listening on port 80') })Luego, después de aplicar el middleware "cors". Debe insertar "http://" antes de "localhost: en su aplicación de reacción".
Ejemplo
axios.get(`http://localhost:3001/api/app`) .then(res => { console.log("res", res); }) .catch(err => { console.log("AXIOS ERROR:", err); })