Saya baru-baru ini mengunggah proyek ASp.NET CORE React dengan Redux (dan KendoUI React) ke platform hosting Azure saya dan sekarang, saya tidak dapat mengakses data apa pun yang diambil dari API. Saya melihat konsol dan melihat pesan kesalahan:
Akses untuk mengambil di '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' (dialihkan dari 'https://mywebsite.azurewebsites.net/api/MyData/GetMyData?page=1&pageSize=20') dari asal 'https://mywebsite.azurewebsites.net ' telah diblokir oleh kebijakan CORS: Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta. Jika respons buram memenuhi kebutuhan Anda, setel mode permintaan ke 'no-cors' untuk mengambil sumber daya dengan CORS dinonaktifkan.
Saya menyelidiki masalahnya dengan mencari pesan kesalahan, saya menemukan beberapa posting tetapi tidak ada yang konkret tentang apa yang harus dilakukan dalam aplikasi reaksi yang merupakan praktik terbaik dan juga aman.
Saya menambahkan header Access-Control-Allow-Origin: * ke pengambilan saya tetapi tidak berhasil. Metode lain yang saya temukan adalah dengan menggunakan proxy tetapi contohnya hanya mendukung lingkungan pengembangan lokal.
Ini pengambilan saya di mana Anda dapat melihat saya menambahkan Access-Control-Allow-Origin ke header:
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);
});
};
Menambahkan tajuk tidak mengubah apa pun dan kesalahan terus berlanjut. Saya ingin memastikan saya melakukan ini dengan benar, adakah yang bisa membantu saya memperbaiki kesalahan ini?
