Błąd Cors surowy pochodzenie-kiedy-cross-pochodzenie prostych węzłów-projekt ReactJS

Question 1

Próbuję pobrać obraz w Cloundinary, ale wystąpił błąd z kodem stanu 500, odnoszących się do cors, choć mam skonfigurowany serwer na rozwiązanie wszystkich źródeł.

Komunikat o błędzie wygląda tak:

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

oto moja pocztowy funkcja :

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 stronie serwera dodałem kolejny blok w App.JS

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

Kody te naprawdę były wykonywane, próbowałem zmienić źródło na konkretny, np. http://127.0.0.1:3001 (mój klienta port 3000). Następnie pojawił się jeszcze jeden komunikat o błędzie

Wracając do pierwszej błędzie na karcie Sieć/Nagłówki :

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

Nie wiem, dlaczego to nie zadziałało. Używam create-react-aplikacja do klienta i ekspresowa generator do serwera

Question 2

Być może należy dodać nagłówek typu zawartości na zapytanie Axios. Podobny do tego.

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

Question 3

Skonfiguruj serwer proxy dla serwera od klienta

Proxy może być proste "proxy": "http://localhost:5000" w pliku package.json, gdzie wszystkie nieznane żądania, zostanie przekierowany na host lokalny:5000 W rzeczywistości, trzeba budzą api z klienta jak /my-route-upload zamiast http://localhost:5000/my-route-upload.

Ale preferowaną metodą byłoby dodać plik o nazwie src/setupProxy.js i $ npm install http-proxy-middleware --save dodaj to do pliku


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

spróbuj to

Question 5

Jest to pośredni oprogramowanie pomaga uniknąć кроссплатформенных błędów

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

Zaznacz to pośredni oprogramowanie tytułu w głównym pliku nad wszystkimi trasami w aplikacji express, zaktualizuj ten blok kodu za pomocą bloku cors serwera w AppJS

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

0

Być może należy dodać nagłówek typu zawartości na zapytanie Axios. Podobny do tego.

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

Willian Mendoza

2021-11-24 04:17:25

to tak nie działa

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

Jak to jest napisane w dzisiejszych czasach, odpowiedź jest niejasna. Proszę, edytuj, aby dodać więcej informacji, które pomogą ludziom zrozumieć, jak to odpowiada na zadane pytanie. Można znaleźć bardziej szczegółowe informacje o tym, jak pisać dobre odpowiedzi, w centrum pomocy.

Community

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

Skonfiguruj serwer proxy dla serwera od klienta

Proxy może być proste "proxy": "http://localhost:5000" w pliku package.json, gdzie wszystkie nieznane żądania, zostanie przekierowany na host lokalny:5000 W rzeczywistości, trzeba budzą api z klienta jak /my-route-upload zamiast http://localhost:5000/my-route-upload.

Ale preferowaną metodą byłoby dodać plik o nazwie src/setupProxy.js i $ npm install http-proxy-middleware --save dodaj to do pliku


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

spróbuj to

devCrow

2021-11-24 07:02:38

Mimo, że ten kod może dać odpowiedź na pytanie, zapewnienie dodatkowego kontekstu co do tego, jak i/lub dlaczego to rozwiązuje problem, zwiększy długoterminowej wartości odpowiedzi. Można znaleźć bardziej szczegółowe informacje o tym, jak pisać dobre odpowiedzi, w centrum pomocy: stackoverflow.com/help/how-to-answer . Powodzenia

nima

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

Jest to pośredni oprogramowanie pomaga uniknąć кроссплатформенных błędów

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

Zaznacz to pośredni oprogramowanie tytułu w głównym pliku nad wszystkimi trasami w aplikacji express, zaktualizuj ten blok kodu za pomocą bloku cors serwera w AppJS

Miałem błąd podczas sprawdzania z Cloudanry. Ale błąd wyglądał tak, jakby wyszła od cors

Błąd Cors surowy pochodzenie-kiedy-cross-pochodzenie prostych węzłów-projekt ReactJS

Pytanie

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii