js file is loading but css file is not loading

In my index.html file js file is loading but css file is not, after debugging in access_log file i found that server sends css file with 200 response but my html file is not loading that, i redirected all requests to index.php on my server using .htaccess file, i tried to get css file directly with url and it is working fine, i am working in localhost environment, i have main htdocs folder it contains all file index.php and index.html and also contains assets folder in that my js and css files are placed.
html file:

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link media="all" rel="stylesheet" href="/assets/test.css" type="text/css" />
  <title>Chat</title>
</head>
<body>
  <div class="top_bar">
    <h1 id="status"></h1>
  </div>
  <div id="test" class="wrapper">
  </div>
  <div class="bottom_bar">
    <form class="text" onsubmit="onEnter(); return false" autocomplete="off">
      <input type="text" name="text" placeholder="Type here" id="text" />
    </form>
    <button id="send">
    </button>
  </div>
  <script src="assets/chat.js"></script>
</body>

My index.php file:

<?php

$raw_url = $_SERVER['REQUEST_URI'];

$url = explode('?', $raw_url);

$route = $url[0];

$query = $url[1];

if (substr($route, 0, 8) == '/assets/') {
  $file_name = substr($route, 8);
  if(file_exists('assets/' . $file_name)) {
    readfile('assets/' . $file_name);
  }
  else {
    http_response_code(404);
  }
} else {
  switch ($route) {
    case '/':
      readfile('index.html');
      break;
    default:
      http_response_code(404);
      break;
  }
}
?>

.htaccess file:

RewriteEngine on
RewriteRule (.*) index.php
RewriteRule ^assets/ - [L,NC]

17 thoughts on “js file is loading but css file is not loading”

  1. if you use CodeIgniter you can use like this

    PHP

    $server_addr = $_SERVER['SERVER_ADDR'];
    $base_url = (is_https() ? 'https' : 'http').'://'.$server_addr
    .substr($_SERVER['SCRIPT_NAME'], 0, strpos($_SERVER['SCRIPT_NAME'], basename($_SERVER['SCRIPT_FILENAME'])));
    $this->set_item('base_url', $base_url);
    

    html

    <link rel="stylesheet" href="<?php echo base_url().'/assets/test.css'; ?>">
    
    Reply
  2. after very hard searching on web i found that you have to set content type first before sending any data to html so before sending css or js file i have to set content type on header header('Content-type: text/css'); so i changed logic in my index.php file to response differently on different data types.

    Reply

Leave a Comment