Cors hatası strict-origin-when-cross-origin basit nodeJS-reactJS projesi

Question 1

Cloundinary'ye resim yüklemeye çalışıyorum, ancak sunucuyu tüm kökene izin verecek şekilde ayarlamış olmama rağmen cors ile ilgili durum kodu 500 ile ilgili bir hata oluştu.

Hata mesajı:

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

işte benim YAZI işlevim :

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

Sunucu tarafında, Uygulamada aşağıdaki bloğu ekledim.JS

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

Bu kodlar gerçekten işe yaradı ve orijini aşağıdaki gibi belirli bir kodla değiştirmeye çalıştım http://127.0.0.1:3001 (müşteri bağlantı noktam 3000). Sonra başka bir hata mesajı çıktı

Ağ / Üstbilgiler sekmesinde ilk hataya geri dön :

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

Neden işe yaramadı bilmiyorum. İstemci için create-react-app ve sunucu için Express generator kullanıyorum

Question 2

Belki de content-type başlığını Axios isteğinize eklemelisiniz. Bunun gibi.

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

Question 3

Sunucunuz için istemcinizden bir proxy kurma

Proxy basit olabilir "proxy": "http://localhost:5000" paket içinde.bilinmeyen tüm isteklerin localhost'a proxy edileceği json:5000 Esasen apı'yi istemciden şu şekilde çağırmanız gerekir /my-route-upload yerine http://localhost:5000/my-route-upload.

Ancak tercih edilen yöntem, adı verilen bir dosya eklemek olacaktır src/setupProxy.js ve $ npm install http-proxy-middleware --save bunu dosyaya ekle


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

bunu dene

Question 5

Bu ara katman yazılımı platformlar arası hatalardan kaçınmaya yardımcı olur

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

Bu başlık katman yazılımını kök dosyanızda express uygulamasındaki tüm rotalarınızın üzerine ayarlayın, Bu kod bloğunu appjs'deki sunucu cors bloğunuzla güncelleyin

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

0

Belki de content-type başlığını Axios isteğinize eklemelisiniz. Bunun gibi.

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

Willian Mendoza

2021-11-24 04:17:25

o hala gelmez işe

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

Şu anda yazıldığı gibi, cevabınız belirsizdir. Lütfen başkalarının sorulan soruyu nasıl ele aldığını anlamalarına yardımcı olacak ek ayrıntılar eklemek için düzenleyin. İyi yanıtların nasıl yazılacağı hakkında daha fazla bilgiyi yardım merkezi'nde bulabilirsiniz.

Community

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

Sunucunuz için istemcinizden bir proxy kurma

Proxy basit olabilir "proxy": "http://localhost:5000" paket içinde.bilinmeyen tüm isteklerin localhost'a proxy edileceği json:5000 Esasen apı'yi istemciden şu şekilde çağırmanız gerekir /my-route-upload yerine http://localhost:5000/my-route-upload.

Ancak tercih edilen yöntem, adı verilen bir dosya eklemek olacaktır src/setupProxy.js ve $ npm install http-proxy-middleware --save bunu dosyaya ekle


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

bunu dene

devCrow

2021-11-24 07:02:38

Bu kod soruyu cevaplayabilirken, sorunun nasıl ve/veya neden çözüldüğüne ilişkin ek bağlam sağlamak cevabın uzun vadeli değerini artıracaktır. İyi yanıtların nasıl yazılacağı hakkında daha fazla bilgiyi yardım merkezi'nde bulabilirsiniz: stackoverflow.com/help/how-to-answer . İyi şanslar

nima

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

Bu ara katman yazılımı platformlar arası hatalardan kaçınmaya yardımcı olur

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

Bu başlık katman yazılımını kök dosyanızda express uygulamasındaki tüm rotalarınızın üzerine ayarlayın, Bu kod bloğunu appjs'deki sunucu cors bloğunuzla güncelleyin

Cloudanry ile doğrulamada bir hata yaptım. Ama hata cors'tan gelmiş gibi görünüyordu.

Cors hatası strict-origin-when-cross-origin basit nodeJS-reactJS projesi

Soru

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride