Postingan lainnya
AJAX to External API with Credentials
Saya ingin bertanya, bagaimana caranya mendapatkan sebuah token dari sebuah API website yang membutuhkan username dan password. saya punya sebuah web localhost yang jika ingin mendapatkan token, harus menyertakan username & password di methods. jika menggunakan jQuery, saya biasa menggunakan $.post() .. tapi, jika menggunakan Vue-resource .. selalu bad request padahal username & password sudah benar .. mungkin disini ada yang bisa membantu.
Terima Kasih.
9 Jawaban:
mungkin di bagian server harus pakai cors headers, supaya tidak error
di server side (kalau PHP) biar enable CORS tambahin;
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Authorization");
lagi bikin aplikasi yg terpisah dari websitenya ya?
sudah pakai mas, tapi entah kenapa selalu bad request.. contoh kodingan saya :
methods: {
getToken: function() {
this.$http.post('localhost/index.php/api_users/login',{
username: this.username,
password: this.password
}).then((response) => {
console.log(response.data.token);
})
server side nya pakai apa gan? kemaren sy pakai YII ky agan juga masalahnya Sapa tau serverside nya harus pakai CSRF token juga protocol di server sidenya https atau http?
pakai http mas, padahal kalo pakai jQuery $.post() tokenya langsung dapet .. entah kenapa pas nyoba pake Vue, si token engga muncul2
Iya kalau di yii kmaren itu csrf token di jquerynya emang auto generate jadi kalo pake yg lain (bukan jquery) ya harus digenerate manual. Saran sy kalau dah ada jquery disitu mending pake jquery aja, ngapain load library vue resource kalau fungsinya sama. Misalnya di yii, kan jquerynya dah built up, jadi mau ga mau diload. Kecuali kalau agan lagi develop aplikasi android pakai cordova, tu cukup reasonable kalau agan pake vue resource, karna sizenya lebih kecil dibanding jquery, jadi agan hemat resource.
methods: {
getToken: function() {
this.$http.post('localhost/index.php/api_users/login',{
username: this.username,
password: this.password
}).then((response) => {
console.log(response.data.token);
}).error(err => {console.log(err)})
coba keliatan errornya seperti apa
vue-resource.min.js:7 OPTIONS http://localhost/index.php/api_users/login (anonymous function) @ vue-resource.min.js:7n @ vue-resource.min.js:7G @ vue-resource.min.js:7_ @ vue-resource.min.js:7s @ vue-resource.min.js:7c @ vue-resource.min.js:7M @ vue-resource.min.js:7s @ vue-resource.min.js:7c @ vue-resource.min.js:7W @ vue-resource.min.js:7s @ vue-resource.min.js:7c @ vue-resource.min.js:7X @ vue-resource.min.js:7s @ vue-resource.min.js:7c @ vue-resource.min.js:7B @ vue-resource.min.js:7s @ vue-resource.min.js:7c @ vue-resource.min.js:7D @ vue-resource.min.js:7s @ vue-resource.min.js:7c @ vue-resource.min.js:7F @ vue-resource.min.js:7s @ vue-resource.min.js:7c @ vue-resource.min.js:7N @ vue-resource.min.js:7s @ vue-resource.min.js:7(anonymous function) @ vue-resource.min.js:7n @ vue-resource.min.js:7e @ vue-resource.min.js:7Z @ vue-resource.min.js:7Z.(anonymous function) @ vue-resource.min.js:7getToken @ (index):90boundFn @ vue.js:130(anonymous function) @ vue.js:2229
(index):1 XMLHttpRequest cannot load http://localhost/index.php/api_users/login. Response for preflight has invalid HTTP status code 400
localhost/:1 Uncaught (in promise) t {url: "http://localhost/index.php/api_users/login", ok: false, status: 0, statusText: "", headers: t…}
Jawaban Terpilih
SOLVED
methods: {
getToken: function() {
var postData = {username: this.username, password: this.password};
this.$http.post('http://localhost/index.php/api_users/login', postData,{emulateJSON: true}).then((response) => {
alert(response.status + ' Success');
this.token = response.data.token
alert(this.token)
}, (response) => {
alert(response.status + ' Gagal');
});
}
}