AJAX to External API with Credentials

vue

✔ Forum ini sudah terjawab


foto Jehan Ramadhan oleh @CodenameJR
10 bulan yang lalu
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.
Jawaban
foto Jehan Ramadhan oleh @CodenameJR
10 bulan yang lalu
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');
	        });
	    }
	  }
answered icon
foto Him oleh @ardyhim
10 bulan yang lalu
mungkin di bagian server harus pakai cors headers, supaya tidak error
foto Fadlun Anaturdasa oleh @QaiserLab
10 bulan yang lalu
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?
foto Jehan Ramadhan oleh @CodenameJR
10 bulan yang lalu
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);
				})
foto Fadlun Anaturdasa oleh @QaiserLab
10 bulan yang lalu
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?
foto Jehan Ramadhan oleh @CodenameJR
10 bulan yang lalu
pakai http mas, padahal kalo pakai jQuery $.post() tokenya langsung dapet .. entah kenapa pas nyoba pake Vue, si token engga muncul2
foto Fadlun Anaturdasa oleh @QaiserLab
10 bulan yang lalu
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.
foto Him oleh @ardyhim
10 bulan yang lalu
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
foto Jehan Ramadhan oleh @CodenameJR
10 bulan yang lalu
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…}

Login untuk diksusi di forum sekolah koding