La scro erreur stricte-origine-quand-croix-de l'origine simple nodeJS-reactJS projet

Question 1

Je suis en train de télécharger l'image à Cloundinary, mais une erreur s'est produite avec le code d'état de 500 relatives à la scro si j'avais mis le serveur pour permettre à tous d'origine.

Le message d'erreur est:

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

voici mon POST de la fonction :

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

À côté serveur, j'avais ajouté le bloc suivant dans App.JS

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

Ces codes s'exécuter, j'ai essayé de modifier l'origine de la spécificité de comme http://127.0.0.1:3001 (mon client port est de 3000). Puis il sortit un autre message d'erreur

Retour à la première erreur, dans l'onglet Réseau/en-Têtes :

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

Je ne sais pas pourquoi ça ne fonctionne pas. J'utilise créez-réagir-app pour les clients et les Exprimer générateur pour le serveur

Question 2

Peut-être que vous devriez ajouter le contenu de l'en-tête de type de votre Axios demande. Comme cette.

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

Question 3

Configuration d'un proxy pour votre serveur à partir de votre client

La procuration peut être un simple "proxy": "http://localhost:5000" dans votre colis.json, où tous les inconnus demandes sera acheminé vers localhost:5000 Essentiellement, vous devez appeler l'api du client /my-route-upload au lieu de http://localhost:5000/my-route-upload.

Mais la méthode préférée serait d'ajouter un fichier appelé src/setupProxy.js et $ npm install http-proxy-middleware --save ajoutez à cela le fichier


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

essayez ceci

Question 5

Ce middleware permet d'éviter de croix-plate-forme d'erreur

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

Mettre cet en-tête middleware sur la racine de votre fichier au-dessus de votre niveau de tous les itinéraires dans l'express d'application, de mise à Jour de ce bloc de code avec votre serveur de la scro bloc dans AppJS

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

0

Peut-être que vous devriez ajouter le contenu de l'en-tête de type de votre Axios demande. Comme cette.

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

Willian Mendoza

2021-11-24 04:17:25

cela ne fonctionne toujours pas

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

Tel qu'il est actuellement rédigé, votre réponse n'est pas claire. Veuillez modifier pour ajouter des détails supplémentaires qui permettront d'aider les autres à comprendre comment cela répond à la question posée. Vous pouvez trouver plus d'informations sur la façon d'écrire de bonnes réponses dans le centre d'aide.

Community

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

Configuration d'un proxy pour votre serveur à partir de votre client

La procuration peut être un simple "proxy": "http://localhost:5000" dans votre colis.json, où tous les inconnus demandes sera acheminé vers localhost:5000 Essentiellement, vous devez appeler l'api du client /my-route-upload au lieu de http://localhost:5000/my-route-upload.

Mais la méthode préférée serait d'ajouter un fichier appelé src/setupProxy.js et $ npm install http-proxy-middleware --save ajoutez à cela le fichier


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

essayez ceci

devCrow

2021-11-24 07:02:38

Alors que ce code peut répondre à la question, en fournissant plus de contexte sur comment et/ou pourquoi il résout le problème serait d'améliorer la réponse à long terme de valeur. Vous pouvez trouver plus d'informations sur la façon d'écrire de bonnes réponses dans le centre d'aide: stackoverflow.com/help/how-to-answer . Bonne chance

nima

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

Ce middleware permet d'éviter de croix-plate-forme d'erreur

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

Mettre cet en-tête middleware sur la racine de votre fichier au-dessus de votre niveau de tous les itinéraires dans l'express d'application, de mise à Jour de ce bloc de code avec votre serveur de la scro bloc dans AppJS

J'ai eu une erreur dans la validation avec Cloudanry. Mais l'erreur est apparue comme il est venu de la scro

La scro erreur stricte-origine-quand-croix-de l'origine simple nodeJS-reactJS projet

La question

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie