Sobatcoding.com - Cara mengatasi masalah error Cors di POST Axios menggunakan Codeigniter 3
Pernah kah kalian mengalami masalah CORS di REST API Codeigniter 3, muncul pesan error "CORS policy: No 'Access-Control-Allow-Origin"
Pesan ini muncul di browser client
Access to XMLHttpRequest at 'http://localhost:8080'
from origin 'http://localhost:8000' has been blocked by CORS policy:
Request header field access-control-allow-origin is not allowed
by Access-Control-Allow-Headers in preflight response.
Pesan error di atas pernah admin alami ketika POST data format JSON menggunakan axios di vue 2 js
Ada beberapa hal yang bisa dilakukan untuk mengatasi error tersebut
Langkah pertama yang bisa dilakukan adalah menambahkan CORS di controller. Contoh simple CORS adalah seperti berikut:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Max-Age: 86400");
header("Access-Control-Allow-Credentials: true");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS") { die(); }
kode di atas bisa kalian tambahkan di dalam method construct controller atau jika kalian menggunakan core controller kalian bisa masukkan di dalam construct core controller
public function __construct()
{
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Max-Age: 86400");
header("Access-Control-Allow-Credentials: true");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS") { die(); }
parent::__construct();
}
Jika sebelumnya error disebabkan POST data menggunakan tipe data JSON, coba kalian ubah data POST kalian menjadi array
Contoh data JSON seperti berikut
formData: {
id: '',
name: '',
username: '',
password: '',
address: '',
phone: ''
},
Untuk script kirim data sebelumnya seperti berikut
axios.post('http://55.55.55.21/restapi_ci3/users/save', this.formData
).then(res => {
console.log(res);
}, (error) => {
console.log(error.response.data);
});
ubah menjadi
var postData = new FormData();
postData.append("name", this.formData.name);
postData.append("username", this.formData.username);
postData.append("password", this.formData.password);
postData.append("address", this.formData.address);
axios.post('http://55.55.55.21/restapi_ci3/users/save', postData
).then(res => {
console.log(res);
}, (error) => {
console.log(error.response.data);
});
Selamat mencoba dan semoga bisa membantu
Komentar 0