Cors เกิดข้อผิดพลาดเข้มงวด-ต้นกำเนิด-เมื่อ-แข่งต้นกำเนิดง่ายอย่าง nodeJS-reactJS โครงการ

Question 1

ฉันพยายามที่จะอัพโหลดภาพไป Cloundinary แต่เกิดข้อผิดพลาดกับสถานะของรหัส 500 สัมพันธ์กับเครื่องช่วย cors ถึงแม้ว่าฉันมีตั้งค่าเซิร์ฟเวอร์เพื่ออนุญาตให้ทั้งต้นกำเนิด.

ที่ข้อความผิดพลาดคือ:

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

นี่คือของฉันโพสต์ฟังก์ชัน:

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

อยู่ในเซิร์ฟเวอร์ด้านข้าง,ฉันมีการเพิ่มต่อไปนี้ในบล็อก App.JS

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

พวกรหัสเคประมวลผลฉันพยายามแก้ไขที่ต้นกำเนิดให้เจาะจงหนึ่งอย่าง http://127.0.0.1:3001 (ลูกความของฉันคือพอร์ต 3000). งั้นมันออกมาอีกข้อความผิดพลาด

กลับไปที่ก่อนเกิดข้อผิดพลาดในแท็บเครือข่าย/ส่วนหัว:

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

ฉันไม่รู้ว่าทำไมมันไม่ได้ผล ฉันใช้สร้างขึ้น-ตอบโต้-แอพสำหรับลูกค้าของและแสดงออกกำเนิดไฟฟ้าเรียบร้อสำหรับเซิร์ฟเวอร์

Question 2

บางทีคุณควรจะเพิ่มเนื้อหาประเภทส่วนหัวของคุณ Axios อยากขอให้ช่วยอะไรหน่อย เหมือนนี้

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

Question 3

ตั้งค่าเป็นของพร็อกซีสำหรับเซิร์ฟเวอร์ของคุณจากลูกความของคุณ

ของพร็อกซีได้เป็นง่ายๆ "proxy": "http://localhost:5000" คุณแพ็คเก็จฉันทำอยู่บ่อยๆlanguage ที่ไหนที่ไม่รู้จักร้องของจะ proxied จะ localhost:5000 โดยพื้นฐานคุณต้องโทรเรียกรูปแบบ api จากลูกค้าเป็น /my-route-upload แทนที่จะเป็น http://localhost:5000/my-route-upload.

แต่ด้วยวิธีก็จะเป็นเพื่อเพิ่มแฟ้มเรียกว่า src/setupProxy.js แล้ว $ npm install http-proxy-middleware --save เพิ่มไปยังแฟ้ม


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

ลองนี่

Question 5

นี่ middleware ช่วยได้เพื่อหลีกเลี่ยมแพลตฟอร์มข้อผิดพลาด

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

ตั้งค่าส่วนหัว middleware บนรากของคุณอยู่เหนือแฟ้มของคุณทั้งเส้นทางที่แสดงแอพฯ,ปรับปรุงเรื่องรหัสป้องกับของเซิร์ฟเวอร์ cors บล็อคใน AppJS

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

0

บางทีคุณควรจะเพิ่มเนื้อหาประเภทส่วนหัวของคุณ Axios อยากขอให้ช่วยอะไรหน่อย เหมือนนี้

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

Willian Mendoza

2021-11-24 04:17:25

มันยังไม่ได้ทำงาน

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

อย่างที่มันเป็นปัจจุบันเขียนของคุณคำตอบคือไม่แน่ชัด โปรด แก้ไข เพื่อเพิ่มรายละเอียดเพิ่มเติมนั้นจะช่วยคนอื่นเข้าใจว่าที่อยู่คำถามถาม คุณสามารถหาข้อมูลมากกว่าที่จะเขียนคำตอบที่ดี ในการช่วยเหลือศูนย์กลาง.

Community

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

ตั้งค่าเป็นของพร็อกซีสำหรับเซิร์ฟเวอร์ของคุณจากลูกความของคุณ

ของพร็อกซีได้เป็นง่ายๆ "proxy": "http://localhost:5000" คุณแพ็คเก็จฉันทำอยู่บ่อยๆlanguage ที่ไหนที่ไม่รู้จักร้องของจะ proxied จะ localhost:5000 โดยพื้นฐานคุณต้องโทรเรียกรูปแบบ api จากลูกค้าเป็น /my-route-upload แทนที่จะเป็น http://localhost:5000/my-route-upload.

แต่ด้วยวิธีก็จะเป็นเพื่อเพิ่มแฟ้มเรียกว่า src/setupProxy.js แล้ว $ npm install http-proxy-middleware --save เพิ่มไปยังแฟ้ม


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

ลองนี่

devCrow

2021-11-24 07:02:38

ตอนที่รหัสอาจจะตอบคำถาม,ที่ดูแลเพิ่มเติมเกี่ยวกับคอนเท็กซ์ได้ยังไงและ/หรือทำไมมันถึงแก้ปัญหาที่จะปรับปรุงคำตอบคือระยะยาวค่า. คุณสามารถหาข้อมูลมากกว่าที่จะเขียนคำตอบที่ดีในการช่วยเหลือศูนย์กลาง: stackoverflow.com/help/how-to-answer . ขอให้โชคดี

nima

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

นี่ middleware ช่วยได้เพื่อหลีกเลี่ยมแพลตฟอร์มข้อผิดพลาด

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

ตั้งค่าส่วนหัว middleware บนรากของคุณอยู่เหนือแฟ้มของคุณทั้งเส้นทางที่แสดงแอพฯ,ปรับปรุงเรื่องรหัสป้องกับของเซิร์ฟเวอร์ cors บล็อคใน AppJS

ฉันต้องซ่อมมันขอบคุณมาก
ฉันเคยผิดพลาดในการตรวจสอบกับ Cloudanry. แต่ข้อผิดพลาดก็โผล่มาเหมือนมันมาจาก cors

Cors เกิดข้อผิดพลาดเข้มงวด-ต้นกำเนิด-เมื่อ-แข่งต้นกำเนิดง่ายอย่าง nodeJS-reactJS โครงการ

คำถาม

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่