Cors di errore severi-origine-quando-cross-origin semplice nodeJS-reactJS progetto

Question 1

Sto cercando di caricare l'immagine di Cloundinary, ma si è verificato un errore con codice di stato 500 in materia di cors se ho dovuto impostare il server per consentire a tutti di origine.

Il messaggio di errore è:

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

ecco il mio POST di funzione :

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")
    }); }

Lato server, avevo aggiunto il seguente blocco App.JS

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

Quei codici, ha fatto eseguire, ho provato a modificare l'origine di quella specifica come http://127.0.0.1:3001 (il mio client di porta è di 3000). Poi è uscito un altro messaggio di errore

Torna al primo errore, nella scheda di Rete/Intestazioni :

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

Non so perché non ha funzionato. Io uso creare-reagire-app per il cliente e di Esprimere il generatore per il server

Question 2

Forse si dovrebbe aggiungere l'intestazione content-type per il tuo Axios richiesta. Come questo.

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

Question 3

Impostare un proxy per il server dal client

Proxy può essere un semplice "proxy": "http://localhost:5000" nel pacchetto.json, dove sconosciuti richieste saranno inoltrate a localhost:5000 Essenzialmente è necessario chiamare l'api dal cliente /my-route-upload invece di http://localhost:5000/my-route-upload.

Ma il metodo preferito sarebbe quello di aggiungere un file chiamato src/setupProxy.js e $ npm install http-proxy-middleware --save aggiungere a questo file


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());

prova questo

Question 5

Questo middleware aiuta a evitare la cross-piattaforma di errore

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();
});

Impostare l'intestazione del middleware sulla root del file sopra il vostro tutte le tratte express app, Aggiornamento di questo blocco di codice con il tuo server cors blocco AppJS

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

0

Forse si dovrebbe aggiungere l'intestazione content-type per il tuo Axios richiesta. Come questo.

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

Willian Mendoza

2021-11-24 04:17:25

ancora non funziona

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

Come già scritto, la tua risposta è chiara. Si prega di modifica per aggiungere ulteriori dettagli che aiuteranno gli altri a capire come questo risolve la domanda. Potete trovare ulteriori informazioni su come scrivere le risposte nel centro assistenza.

Community

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

Impostare un proxy per il server dal client

Proxy può essere un semplice "proxy": "http://localhost:5000" nel pacchetto.json, dove sconosciuti richieste saranno inoltrate a localhost:5000 Essenzialmente è necessario chiamare l'api dal cliente /my-route-upload invece di http://localhost:5000/my-route-upload.

Ma il metodo preferito sarebbe quello di aggiungere un file chiamato src/setupProxy.js e $ npm install http-proxy-middleware --save aggiungere a questo file


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());

prova questo

devCrow

2021-11-24 07:02:38

Mentre questo codice può rispondere alla domanda, fornendo informazioni aggiuntive in merito a come e/o perché non risolve il problema sarebbe di migliorare la risposta a lungo termine di valore. Potete trovare ulteriori informazioni su come scrivere le risposte nel centro di aiuto: stackoverflow.com/help/how-to-answer . Buona fortuna

nima

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

Questo middleware aiuta a evitare la cross-piattaforma di errore

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();
});

Impostare l'intestazione del middleware sulla root del file sopra il vostro tutte le tratte express app, Aggiornamento di questo blocco di codice con il tuo server cors blocco AppJS

Ho avuto un errore di validazione con Cloudanry. Ma l'errore è apparso come se fosse venuto da cors

Cors di errore severi-origine-quando-cross-origin semplice nodeJS-reactJS progetto

Domanda

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria