Axios POST Cors Problem di Codeigniter 3

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

Menambahkan CORS

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();
}

Ubah Tipe Data

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