ขอแนะนำให้โพสต์ที่นี่จาก สแต็คโอเวอร์โฟลว์. นี่คือความหวัง

แอปพลิเคชันของฉันมีสององค์ประกอบ:

• DO 'App' ซึ่งโฮสต์เว็บไซต์ตอบโต้ เว็บไซต์นี้ส่งคำขอไปที่:
• DO 'Droplet' ซึ่งโฮสต์ API

เมื่อฉันพยายามเชื่อมต่อจากสภาพแวดล้อมการพัฒนา Droplet ข้อมูลจะถูกส่งกลับและแอป react ที่ปรับใช้ในเครื่องจะแสดงข้อมูล

อย่างไรก็ตาม เมื่อฉันปรับใช้แอป react บนแอป DO และพยายามส่งคำขอเดียวกัน ฉันได้รับข้อผิดพลาด: การปฏิเสธที่ไม่ได้จัดการ (TypeError): ไม่อนุญาตให้ร้องขอทรัพยากร. คอนโซลของเบราว์เซอร์มีดังต่อไปนี้

ไม่อนุญาตให้ร้องขอทรัพยากร
Fetch API ไม่สามารถโหลด http://xxx.xxx.xxx.xxx:8080/search/ เนื่องจากการตรวจสอบการควบคุมการเข้าถึง
การปฏิเสธสัญญาที่ไม่ได้จัดการ: TypeError: ไม่อนุญาตให้ร้องขอทรัพยากร

ฉันได้ลองใช้ทั้ง IP สาธารณะสำหรับ Droplet ที่โฮสต์ API และ IP ส่วนตัว ปัญหาเดียวกันนี้เกิดขึ้นเมื่อปรับใช้แอปพลิเคชันบนแอป DO

ข้อผิดพลาด

ฉันสามารถดูพื้นที่ใดที่อาจมีปัญหาได้บ้าง

const fetchReferences = async () => {

fetch(âhttp://xxx.xxx.xxx.xxx:8080/search/â, {. //นี่คือบรรทัดที่เกิดข้อผิดพลาด 
วิธีการ: âPOSTâ,
เนื้อความ: JSON.stringify({
url: searchState.searchCriteria

ใน python API ฉันอนุญาตทุกอย่างผ่าน:

แอพ = กระติกน้ำ (ชื่อ)
CORS(แอป, ทรัพยากร={r"/â: {"originsâ: ââ}})
api = API (แอป)
พาร์เซอร์ = reqparse.RequestParser()

การบันทึก

บันทึกเอาต์พุต Refgator API

บันทึกข้อผิดพลาด Refgator API

ปัญหา CORS?

ดังนั้น...

เหตุใดอินสแตนซ์ของเว็บไซต์ที่โหลดในเครื่องด้วยเส้นด้ายจึงเชื่อมต่อกับหยดได้สำเร็จ

ฉันสงสัยว่าอาจเป็นเพราะมีคีย์ที่ใช้ร่วมกันกับ Droplet ที่โฮสต์ API

เหตุใดอินสแตนซ์ของเว็บไซต์ที่โหลดบนแพลตฟอร์ม DO App จึงเชื่อมต่อกับหยดข้อมูลไม่สำเร็จ

ฉันเคยเห็นโพสต์เกี่ยวกับปัญหา CORS ระหว่างหยดและแอปที่โฮสต์บน Digital Ocean ดู ที่นี่ และ ที่นี่.

ความรู้ของฉันเกี่ยวกับ CORS นั้นไม่มีอยู่จริง ดังนั้นการยืนยันว่าสิ่งนี้ใช้เวลานานมาก

อาจเป็นการดีที่สุดที่จะย้าย repo กลับไปที่ bitbucket และพยายามใช้ droplet แทนแอป