วิธีแก้ไขข้อผิดพลาด CORS เมื่อดึงข้อมูล API ในแอปพลิเคชัน React ของฉัน

ฉันเพิ่งอัปโหลดโปรเจ็กต์ ASp.NET CORE React พร้อม Redux (และ KendoUI React) ไปยังแพลตฟอร์มโฮสติ้ง Azure ของฉัน และตอนนี้ ฉันไม่สามารถเข้าถึงข้อมูลใดๆ ที่ดึงมาจาก API ได้ ฉันดูที่คอนโซลและเห็นข้อความแสดงข้อผิดพลาด:

เข้าถึงเพื่อดึงข้อมูลได้ที่ 'https://login.microsoftonline.com/xxx-xxx-xxx-xxx-xxx/oauth2/authorize?client_id=xxx-xxx-xxx-xxx-xxx&redirect_uri=https%3A%2F%2Fmywebsite.azurewebsites.net%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=xxx.xxxstate=xxx-xxx-xxx-xxx-xxxxxx&x-client-SKU=ID_NET&x-client-ver=2.1.4.0' (เปลี่ยนเส้นทางจาก 'https://mywebsite.azurewebsites.net/api/MyData/GetMyData?page=1&pageSize=20') จากต้นทาง 'https://mywebsite.azurewebsites.net ' ถูกบล็อกโดยนโยบาย CORS: ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ หากการตอบสนองแบบทึบตอบสนองความต้องการของคุณ ให้ตั้งค่าโหมดคำขอเป็น 'no-cors' เพื่อดึงทรัพยากรโดยปิดใช้งาน CORS

ฉันตรวจสอบปัญหาโดยการค้นหาข้อความแสดงข้อผิดพลาด ฉันพบโพสต์บางส่วนแต่ไม่มีอะไรชัดเจนเกี่ยวกับสิ่งที่ต้องทำในแอปพลิเคชันโต้ตอบที่เป็นแนวทางปฏิบัติที่ดีที่สุดและปลอดภัย

ฉันเพิ่มส่วนหัวของ Access-Control-Allow-Origin: * ในการดึงข้อมูลของฉัน แต่มันไม่ทำงาน อีกวิธีหนึ่งที่ฉันพบคือการใช้พรอกซี แต่ตัวอย่างนี้รองรับเฉพาะสภาพแวดล้อมการพัฒนาในเครื่องเท่านั้น

นี่คือการดึงข้อมูลของฉันซึ่งคุณจะเห็นว่าฉันเพิ่ม Access-Control-Allow-Origin ในส่วนหัว:

fetchData(dataState) {
    const queryStr = `${toDataSourceRequestString(dataState)}`;
    const hasGroups = dataState.group && dataState.group.length;
    const base_url = 'api/MyData/GetMyData';
    const init = { method: 'GET', accept: 'application/json', headers: "Access-Control-Allow-Origin: *" };

    fetch(`${base_url}?${queryStr}`, init)
        .then(response => response.json())
        .then(({ Data, total }) => {
                this.setState({
                    result: hasGroups ? translateDataSourceResultGroups(Data) : Data,
                    total,
                    dataState
                });
            }).catch(function (error) {
                console.log('Error: \n', error);
            });
};

การเพิ่มส่วนหัวไม่ได้เปลี่ยนแปลงอะไรและข้อผิดพลาดยังคงมีอยู่ ฉันต้องการแน่ใจว่าฉันทำสิ่งนี้อย่างถูกต้อง ใครสามารถช่วยฉันแก้ไขข้อผิดพลาดนี้ได้บ้าง


reactjs redux cors asp.net-core adal
person Yanayaya    schedule 25.04.2019    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

Access-Control-Allow-Origin เป็นส่วนหัวการตอบกลับ สามารถตั้งค่าได้โดยเซิร์ฟเวอร์เท่านั้น เซิร์ฟเวอร์จะกำหนดว่าจะยอมรับคำขอข้ามไซต์หรือไม่ และในกรณีนี้ เซิร์ฟเวอร์จะแจ้งว่าไม่ ไม่มีทางแก้ไขได้

ดูเหมือนว่าคุณกำลังพยายามเข้าถึงเซิร์ฟเวอร์ Azure ของคุณ แต่ระบบเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบของ Microsoft ตรวจสอบให้แน่ใจว่าคุณสามารถเข้าถึงเซิร์ฟเวอร์ได้โดยไม่ต้องเปลี่ยนเส้นทางเมื่อทำการร้องขอ ตรวจสอบให้แน่ใจว่าโค้ด JavaScript ของคุณทำงานบนโดเมนเดียวกัน (ฉันถือว่าเป็นเช่นนั้น) มิฉะนั้นกำหนดค่า CORS บนเว็บเซิร์ฟเวอร์: https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

person gerwin    schedule 25.04.2019
comment
นี่เป็นพฤติกรรมที่น่าสับสน ฉันเข้าสู่ระบบแล้ว แต่ยังคงพยายามเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ นั่นแปลกมาก ฉันใช้เอกสารที่เชื่อมโยงจาก Microsoft แต่ข้อผิดพลาดเดียวกันนี้ปรากฏขึ้น - person Yanayaya; 25.04.2019
comment
ใช่ มันจะต้องเกี่ยวข้องกับเซิร์ฟเวอร์ของคุณ หากคุณดูข้อผิดพลาดอย่างละเอียด จะมีแจ้งว่าข้อผิดพลาดถูกเปลี่ยนเส้นทางจาก https://mywebsite.azurewebsites.net/api/MyData/GetMyData?page=1&pageSize=20 นี่คือรหัสเซิร์ฟเวอร์ของคุณ เป็นไปได้มากว่าคุณทำการกำหนดค่าผิดพลาดซึ่งป้องกันไม่ให้ใครก็ตามเข้าถึงเซิร์ฟเวอร์ของคุณโดยไม่มีการรับรองความถูกต้องของ Microsoft คุณได้ตั้งค่าความปลอดภัยบนบริการแอพของคุณแล้วหรือยัง? มีอะไรอีกบ้างที่อาจทำให้เกิดพฤติกรรมนี้? หากคุณ PM ให้ฉันทราบจุดสิ้นสุดจริงฉันสามารถดูได้ - person gerwin; 26.04.2019

arrow_upward
1
arrow_downward

ใช้ https://cors-anywhere.herokuapp.com ต่อท้ายสิ่งนี้กับ API ของคุณ

eg: https://cors-anywhere.herokuapp.com/user/list

นี่เป็นพร็อกซีสาธารณะและไม่มีการควบคุมว่าใครสามารถดูข้อมูลได้ อย่าใช้พร็อกซีเซิร์ฟเวอร์มากเกินไป ควรใช้พรอกซีของคุณเอง หากไม่สามารถแก้ไข azure api ได้

person Dheeraj    schedule 25.04.2019
comment
โปรดทราบว่า ณ เดือนมกราคม 2021 cors-anywhere ถูกจำกัดการใช้งานอย่างเข้มงวดในขณะนี้และอาจไม่ใช่วิธีแก้ปัญหาที่ถูกต้องอีกต่อไป github.com/Rob--W/cors-anywhere/issues/301< /ก> - person Neil Monroe; 08.03.2021