Jquery AJAX: Tidak ada 'Access-Control-Allow-Origin' header ada pada sumber daya yang diminta
Saya mencoba untuk mengirim data ke API dari localhost: 4502 port saya. Ketika saya mencoba memposting data ke API ini menggunakan POSTMAN, data ditambahkan di backend dengan memberikan kunci Otorisasi Dasar. Hal yang sama saya coba terapkan di sini dalam panggilan Ajax Jquery, tetapi mendapatkan kesalahan CORS. Pertama kali di jquery saya mencoba memposting data, tolong bantu di sini, apa yang bisa saya tambahkan. Saya telah mendapatkan kunci API untuk Otorisasi Dasar sebagai Nama Pengguna dan Kata Sandi dapat dikosongkan.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Save").click(function(){
var person = new Object();
person.Name = $('#Name').val();
person.EmailAddress = $('#EmailAddress').val();
person.CustomFields = [0];
person.CustomFields[0].Key = "[Country]";
person.CustomFields[0].Value = $('#Country').val();;
$.ajax({
url: 'https://api.createsend.com/api/v3.1/subscribers/7c7a6087b0e450ad72b38be83098e271.json',
type: 'POST',
dataType: 'json',
data:person,
success: function(data,textStatus,xhr){
console.log(data);
},
error: function(xhr,textStatus,errorThrown){
console.log('Error Something');
},
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic OTdlMjVmNWJiMTdjNzI2MzVjOGU3NjlhOTI3ZTA3M2Q5MWZmMTA3ZDM2YTZkOWE5Og==");
}
});
});
});
</script>
Saya telah menambahkan dataType: 'jsonp' dan berhasil!
$.ajax({
type: 'POST',
crossDomain: true,
dataType: 'jsonp',
url: '',
success: function(jsondata){
}
})
Ini adalah masalah CORS, api Anda tidak dapat diakses langsung dari remote atau asal yang berbeda, Untuk mengizinkan alamat ip lain atau asal lain mengakses api Anda, Anda harus menambahkan ' Access-Control-Allow-Origin ' pada api ' s header, Anda dapat mengatur nilainya ke ' * ' jika Anda ingin dapat diakses oleh semua orang, atau Anda dapat mengatur domain atau ips tertentu seperti ' http://siteA.com' atau ' http://192. alamat ip ';
Sertakan ini pada header api's Anda, mungkin bervariasi tergantung pada bagaimana Anda menampilkan data json,
jika Anda menggunakan ajax, untuk mengambil dan menampilkan data, header Anda akan terlihat seperti ini,
$.ajax({
url: '',
headers: { 'Access-Control-Allow-Origin': 'htt://site allowed to access' },
data: data,
type: 'dataType',
/* etc */
success: function(jsondata){
}
})
Jika Anda menggunakan NodeJs untuk sisi server Anda, cukup tambahkan ini ke rute Anda dan Anda akan baik-baik saja
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");Rute Anda kemudian akan terlihat seperti ini
router.post('/odin', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
return res.json({Name: req.body.name, Phone: req.body.phone});});
Sisi klien untuk panggilan Ajax
var sendingData = {
name: "Odinfono Emmanuel",
phone: "1234567890"
}
<script>
$(document).ready(function(){
$.ajax({
url: 'http://127.0.0.1:3000/odin',
method: 'POST',
type: 'json',
data: sendingData,
success: function (response) {
console.log(response);
},
error: function (error) {
console.log(error);
}
});
});
</script>Anda seharusnya memiliki sesuatu seperti ini di konsol browser Anda sebagai respons
{ name: "Odinfono Emmanuel", phone: "1234567890"}Nikmati coding....
