Cors chyba prísne-pôvodu-pri-cross-pôvodu jednoduché nodeJS-reactJS projektu

Question 1

Snažím sa nahrať obrázok na Cloundinary, ale nastala chyba s kódom stavu 500 týkajúce sa cors keď som mala nastaviť server, ak chcete umožniť všetkým pôvodu.

Chybové hlásenie je:

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

tu je môj PRÍSPEVOK funkcia :

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

V strane servera, som pridal nasledujúci blok v App.JS

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

Tieto kódy si vykonanie, som sa snažil upraviť pôvodu na konkrétne taký, ako http://127.0.0.1:3001 (môj klient je port 3000). Potom to prišlo ďalšie chybové hlásenie

Späť na prvú chybu, v tab Network/Hlavičky :

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

Neviem, prečo to nefungovalo. Používam vytvoriť-react-aplikácia pre klienta a Vyjadriť generátor pre server

Question 2

Možno by ste mali pridať content-type hlavičky vášho Axios žiadosti. Ako je táto.

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

Question 3

Nastavenie proxy servera na váš server z vášho klienta

Proxy môže byť jednoduchá "proxy": "http://localhost:5000" v balíku.json, kde všetky neznáme žiadosti sa proxied na localhost:5000 V podstate musíte volanie api od klienta, /my-route-upload namiesto http://localhost:5000/my-route-upload.

Ale preferovaný spôsob by bolo pridať súbor s názvom src/setupProxy.js a $ npm install http-proxy-middleware --save pridať tento súbor


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

skúste tento

Question 5

Tento middleware, pomáha aby sa 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();
});

Nastavenie hlavičky middleware na váš koreňový súborový nad všetky trasy v express aplikácia, Aktualizácia tento blok kódu so serverom cors bloku v AppJS

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

0

Možno by ste mali pridať content-type hlavičky vášho Axios žiadosti. Ako je táto.

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

Willian Mendoza

2021-11-24 04:17:25

je 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

Ako je to v súčasnosti napísané, vaša odpoveď je nejasná. Prosím, upravte a pridajte ďalšie podrobnosti, ktoré vám pomôže ostatným pochopiť, ako sa to rieši otázku. Viac informácií môžete nájsť informácie o tom, ako napísať dobrý odpovede v centre pomoci.

Community

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

Nastavenie proxy servera na váš server z vášho klienta

Proxy môže byť jednoduchá "proxy": "http://localhost:5000" v balíku.json, kde všetky neznáme žiadosti sa proxied na localhost:5000 V podstate musíte volanie api od klienta, /my-route-upload namiesto http://localhost:5000/my-route-upload.

Ale preferovaný spôsob by bolo pridať súbor s názvom src/setupProxy.js a $ npm install http-proxy-middleware --save pridať tento súbor


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

skúste tento

devCrow

2021-11-24 07:02:38

Zatiaľ čo tento kód môže odpovedať na otázku, poskytujú ďalšie súvislosti o tom, ako a/alebo prečo sa to rieši problém by sa zlepšila odpoveď je dlhodobé hodnoty. Viac informácií môžete nájsť informácie o tom, ako napísať dobrý odpovede v centre pomoci: stackoverflow.com/help/how-to-answer . Veľa šťastia

nima

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

Tento middleware, pomáha aby sa 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();
});

Nastavenie hlavičky middleware na váš koreňový súborový nad všetky trasy v express aplikácia, Aktualizácia tento blok kódu so serverom cors bloku v AppJS

Mal som chybu v validácie s Cloudanry. Ale chyba objavila, ako to prišlo z cors

Cors chyba prísne-pôvodu-pri-cross-pôvodu jednoduché nodeJS-reactJS projektu

Otázka

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii