Cors chyba přísné původu-když-cross-původu jednoduchý nodeJS-reactJS projektu

Question 1

Snažím se nahrát obrázek do Cloundinary, ale došlo k chybě s stavový kód 500 týkajících se cors když jsem měl nastavit server tak, aby všechny původu.

Chybová zpráva:

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

zde je můj POST funkce :

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

Na straně serveru jsem přidal následující blok v App.JS

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

Tyto kódy udělal spustit, zkoušel jsem upravit původu na konkrétní jeden jako http://127.0.0.1:3001 (můj klient přístavu je 3000). Pak to přišlo, další chybové zprávy

Zpět k první chybě, v záložce Network/Záhlaví :

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

Nevím, proč to nefungovalo. Používám vytvořit-reagovat-aplikace pro klienta, a Vyjádřete generátor pro server

Question 2

Možná bys měl přidat záhlaví content-type, aby vaše Axios žádost. , Jako je tento.

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

Question 3

Nastavení proxy serveru z klientské

Proxy může být jednoduchý "proxy": "http://localhost:5000" v balíčku.json, kde všechny neznámé žádosti budou proxy na localhost:5000 V podstatě budete muset zavolat api od klienta jako /my-route-upload místo http://localhost:5000/my-route-upload.

Ale upřednostňovanou metodou by bylo přidat soubor s názvem src/setupProxy.js a $ npm install http-proxy-middleware --save přidat do souboru


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

zkuste to

Question 5

Tento middleware pomáhá, aby se zabránilo cross-platform chyba

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

Nastavit záhlaví middleware na vašem root souboru nad všechny trasy v express aplikaci, Aktualizovat tento blok kódu se serverem cors blok v AppJS

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

0

Možná bys měl přidat záhlaví content-type, aby vaše Axios žádost. , Jako je tento.

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

Willian Mendoza

2021-11-24 04:17:25

to stále nefunguje

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

Tak, jak je napsaná, vaše odpověď je nejasná. Prosím, upravit, přidat další podrobnosti, které ostatním pomohou pochopit, jak se tohle řeší otázku, zeptal se. Můžete si najít více informací o tom, jak psát dobré odpovědi v centru nápovědy.

Community

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

Nastavení proxy serveru z klientské

Proxy může být jednoduchý "proxy": "http://localhost:5000" v balíčku.json, kde všechny neznámé žádosti budou proxy na localhost:5000 V podstatě budete muset zavolat api od klienta jako /my-route-upload místo http://localhost:5000/my-route-upload.

Ale upřednostňovanou metodou by bylo přidat soubor s názvem src/setupProxy.js a $ npm install http-proxy-middleware --save přidat do souboru


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

zkuste to

devCrow

2021-11-24 07:02:38

Zatímco tento kód může odpovědět na otázku, poskytuje další souvislosti o tom, jak nebo proč se to řeší problém by zlepšit odpověď je dlouhodobou hodnotu. Můžete si najít více informací o tom, jak psát dobré odpovědi v centru nápovědy: stackoverflow.com/help/how-to-answer . Hodně štěstí

nima

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

Tento middleware pomáhá, aby se zabránilo cross-platform chyba

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

Nastavit záhlaví middleware na vašem root souboru nad všechny trasy v express aplikaci, Aktualizovat tento blok kódu se serverem cors blok v AppJS

Měl jsem chybu v ověření s Cloudanry. Ale chyba se objevila, jako by to pocházelo od cors

Cors chyba přísné původu-když-cross-původu jednoduchý nodeJS-reactJS projektu

Otázka

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii