Cors eroare stricte-origine-când-cross-origin simplu nodeJS-reactJS proiect

Question 1

Eu sunt încercarea de a încărca imagini pentru a Cloundinary, dar a aparut o eroare cu codul de stare 500 referitoare la cor, deși am avut setați server pentru a permite tuturor origine.

Mesajul de eroare este:

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

aici este meu POST funcție :

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

În partea de server, am adăugat următoarele bloc în App.JS

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

Aceste coduri au executat, am încercat să modifice originea sa specific ca http://127.0.0.1:3001 (clientul meu port este de 3000). Apoi a venit un alt mesaj de eroare

Înapoi la prima eroare, in tab-ul de Rețea/Antete :

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

Nu știu de ce nu a mers. Eu folosesc crea o reacție în-app pentru client și Exprima generator pentru server

Question 2

Poate că ar trebui să adăugați conținutul-tip antet de la Axios cerere. Astfel.

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

Question 3

Configurați un server proxy pentru server-ul dvs. de client

Proxy poate fi un simplu "proxy": "http://localhost:5000" în pachet.json, în cazul în care toate cererile necunoscut va fi aproximat la localhost:5000 În esență, aveți nevoie pentru a apela api-ul de la client ca /my-route-upload în loc de http://localhost:5000/my-route-upload.

Dar a preferat metoda ar fi pentru a adăuga un fișier numit src/setupProxy.js și $ npm install http-proxy-middleware --save adăugați acest la dosar


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

încercați acest lucru

Question 5

Acest middleware ajută la evitarea cross-platform de eroare

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

Setați acest antet middleware pe de fișiere rădăcină de mai sus toate rutele în express app, Actualiza acest bloc de cod cu server-ul dvs. cors bloc în AppJS

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

0

Poate că ar trebui să adăugați conținutul-tip antet de la Axios cerere. Astfel.

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

Willian Mendoza

2021-11-24 04:17:25

încă nu funcționează

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

Așa cum e scrisă, răspunsul este clar. Vă rugăm să editați pentru a adăuga detalii suplimentare, care va ajuta pe alții să înțeleagă cum acest adresează întrebarea. Puteți găsi mai multe informații despre cum să scrie răspunsuri bune în centrul de ajutor.

Community

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

Configurați un server proxy pentru server-ul dvs. de client

Proxy poate fi un simplu "proxy": "http://localhost:5000" în pachet.json, în cazul în care toate cererile necunoscut va fi aproximat la localhost:5000 În esență, aveți nevoie pentru a apela api-ul de la client ca /my-route-upload în loc de http://localhost:5000/my-route-upload.

Dar a preferat metoda ar fi pentru a adăuga un fișier numit src/setupProxy.js și $ npm install http-proxy-middleware --save adăugați acest la dosar


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

încercați acest lucru

devCrow

2021-11-24 07:02:38

În timp ce acest cod poate răspunde la întrebare, oferind un plus de context cu privire la cum și de ce se rezolvă problema ar îmbunătăți răspunsul e valoare pe termen lung. Puteți găsi mai multe informații despre cum să scrie răspunsuri bune în centrul de ajutor: stackoverflow.com/help/how-to-answer . Mult noroc

nima

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

Acest middleware ajută la evitarea cross-platform de eroare

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

Setați acest antet middleware pe de fișiere rădăcină de mai sus toate rutele în express app, Actualiza acest bloc de cod cu server-ul dvs. cors bloc în AppJS

Am avut o greșeală în validarea cu Cloudanry. Dar eroarea a aparut ca a venit de la cors

Cors eroare stricte-origine-când-cross-origin simplu nodeJS-reactJS proiect

Problema

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie