CodeIgniter+Vue项目Axios带Authorization头触发CORS错误求助

Hey there, let's get this CORS issue sorted out for you. The error you're seeing happens because two key things are clashing:

1. You’re adding the Authorization header globally to all Axios requests—including the login request, even when the token might be empty.
2. Your CodeIgniter backend isn’t configured to allow the Authorization header in CORS preflight responses, which the browser sends to validate cross-origin requests.

Here are two straightforward fixes you can implement, either alone or together for the most robust solution:

1. Update Your CodeIgniter Backend to Allow the Authorization Header #

The core problem is that your server’s preflight (OPTIONS) response doesn’t list Authorization as an allowed header. You can fix this by configuring CORS properly in CodeIgniter:

Option A: Add CORS Headers in a Base API Controller #

If you have a base controller for all your API endpoints, add these headers to its constructor to apply them across all API routes:

public function __construct()
{
    parent::__construct();
    
    // Allow your Vue.js frontend origin (replace with your production URL later)
    header("Access-Control-Allow-Origin: http://localhost:8080");
    // Permit common HTTP methods your app uses
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
    // Explicitly include Authorization in allowed request headers
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
    // Enable credentials if you're using cookies or token-based auth with credentials
    header("Access-Control-Allow-Credentials: true");

    // Handle OPTIONS preflight requests immediately to avoid unnecessary processing
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        exit(0);
    }
}

Option B: Global CORS Fix via Index.php #

For a quick, server-wide fix, add the same header code at the very top of your CodeIgniter index.php file (before any other code runs):

<?php
// Add CORS headers first
header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Credentials: true");

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
}

// Rest of your index.php code...

2. Optimize Frontend Axios Header Setup #

Since your login request doesn’t actually need an Authorization header (the user hasn’t logged in yet, so the token is likely empty), tweak your router.beforeEach logic to skip adding the header for the login page:

router.beforeEach((to, from, next) => {
  // Skip adding Authorization header when navigating to login
  if (to.path === '/login') {
    delete axios.defaults.headers.common['Authorization'];
  } else {
    const token = localStorage.getItem('token');
    if (token) {
      axios.defaults.headers.common['Authorization'] = token;
    } else {
      // Remove the header if no token exists to avoid sending an empty value
      delete axios.defaults.headers.common['Authorization'];
    }
  }
  next();
});

Final Notes #

• Remember to replace http://localhost:8080 with your actual frontend URL when deploying to production.
• Combining both fixes is ideal: the backend config ensures all authorized requests work correctly, while the frontend optimization avoids unnecessary preflight requests for login.

内容的提问来源于stack exchange，提问作者Yasin