Cors error estricta-origen-cuando-cruz-de origen simple nodeJS-reactJS proyecto

Question 1

Estoy tratando de subir la imagen a Cloundinary, pero se produjo un error con el código de estado 500 relacionadas con cors a pesar de que yo había puesto el servidor para permitir que todos los de origen.

El mensaje de error es:

POST http://localhost:5000/my-route-upload 500 (Internal Server Error)

aquí está mi POST de la función :

const cloudinaryUpload = (fileToUpload) => {
    return axios.post(API_URL + '/cloudinary-upload', fileToUpload)
    .then(res => console.log(res))
    .catch(err => {
        console.log(err)
        console.log("cannot post")
    }); }

En el lado del servidor, yo había añadido el siguiente bloque en App.JS

const cors = require('cors'); 
var app = express();
app.use(cors({
  origin: "*",
  })
);

Los códigos hizo ejecutar, he intentado modificar el origen de las específicas como http://127.0.0.1:3001 (mi puerto de cliente es de 3000). Luego llegó otro mensaje de error

De vuelta al primer error, en la pestaña de Red/Cabeceras :

Request URL: http://localhost:5000/cloudinary-upload
Request Method: POST
Status Code: 500 
Referrer Policy: strict-origin-when-cross-origin

Access-Control-Allow-Origin: *

Host: localhost:5000
Origin: http://127.0.0.1:3000

No sé por qué no funcionó. Yo uso crear-reaccionar-la aplicación para el cliente y Expresar generador para el servidor

Question 2

Tal vez debería añadir el encabezado de tipo de contenido para su Axios solicitud. Como esto.

const res = await axios.post('url', data, {
  headers: {
    'content-type': 'application/json'
  }
});

Question 3

Configuración de un proxy para el servidor desde el cliente

Proxy puede ser un simple "proxy": "http://localhost:5000" en su paquete.json, donde todos los desconocidos las solicitudes se envían a localhost:5000 Esencialmente, usted necesita llamar a la api de cliente como /my-route-upload en lugar de http://localhost:5000/my-route-upload.

Pero el método preferido sería agregar un archivo llamado src/setupProxy.js y $ npm install http-proxy-middleware --save agregar a este archivo


module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};```

Also look at enabling cors in express
https://enable-cors.org/server_expressjs.html

Question 4

const cors = require('cors'); 
var app = express();
app.use(cors());

intente esto

Question 5

Este middleware ayuda a evitar la cruz-plataforma de error

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

Establecer este encabezado middleware en el archivo de root por encima de su todas las rutas en el expreso de la aplicación, la Actualización de este bloque de código con el servidor cors bloque en AppJS

Willian Mendoza · Answer 1 · 2021-11-24T04:17:25

0

Tal vez debería añadir el encabezado de tipo de contenido para su Axios solicitud. Como esto.

const res = await axios.post('url', data, {
  headers: {
    'content-type': 'application/json'
  }
});

Willian Mendoza

2021-11-24 04:17:25

aún así no funciona

const cloudinaryUpload = (fileToUpload) => { return axios.post(API_URL + '/cloudinary-upload', fileToUpload, {headers: { 'content-type': 'application/json' }}) .then(res => res.data) .catch(err => { console.log(err) console.log("cannot post") }); }

Ho Quang Lam

Como está escrito, su respuesta no está clara. Por favor editar para agregar detalles adicionales que ayudarán a otros a entender cómo esto se refiere a la pregunta. Usted puede encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.

Community

Raja Avinash · Answer 2 · 2021-11-24T05:04:57

Configuración de un proxy para el servidor desde el cliente

Proxy puede ser un simple "proxy": "http://localhost:5000" en su paquete.json, donde todos los desconocidos las solicitudes se envían a localhost:5000 Esencialmente, usted necesita llamar a la api de cliente como /my-route-upload en lugar de http://localhost:5000/my-route-upload.

Pero el método preferido sería agregar un archivo llamado src/setupProxy.js y $ npm install http-proxy-middleware --save agregar a este archivo


module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};```

Also look at enabling cors in express
https://enable-cors.org/server_expressjs.html

devCrow · Answer 3 · 2021-11-24T07:02:38

0

const cors = require('cors'); 
var app = express();
app.use(cors());

intente esto

devCrow

2021-11-24 07:02:38

Mientras que este código puede responder a la pregunta, proporcionar contexto adicional sobre cómo y/o por qué se resuelve el problema podría mejorar la respuesta del valor a largo plazo. Usted puede encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda: stackoverflow.com/help/how-to-answer . Buena suerte

nima

Smit Gajera · Answer 4 · 2021-11-24T09:08:05

Este middleware ayuda a evitar la cruz-plataforma de error

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

Establecer este encabezado middleware en el archivo de root por encima de su todas las rutas en el expreso de la aplicación, la Actualización de este bloque de código con el servidor cors bloque en AppJS

Había un error en la validación con Cloudanry. Pero apareció el error como si viniera de cors

Cors error estricta-origen-cuando-cruz-de origen simple nodeJS-reactJS proyecto

Pregunta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría