CORS錯誤。無法從index.html訪問父目錄中的資產檔案夾-有解無憂

我正在通過 Morten Rand-Hendriksen 的課程（JavaScript Essential Training）學習 JavaScript。我下載了所有的練習檔案和使用本地運行的 Firefox 和 VSCode 和 Live Server，我嘗試在瀏覽器中加載下面的示例代碼（示例 5.02）。

它不顯示顯示背包圖片的 CSS 樣式。在控制臺中，我收到此錯誤：

The resource from “http://127.0.0.1:5500/assets/style.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

我在“設定”中將“跟蹤內容”設定為“關閉”（參見螢屏截圖），但沒有幫助。

我確認檔案存在“..\assets\images\everyday.svg”

更新：我嘗試直接在 Firefox 中加載它，而不是 LiveServer。我在控制臺中看到，跨域請求被阻止：同源策略不允許讀取位于 file:///C:/Users/Me/Documents/Learn/JS/05_03/Backpack.js 的遠程資源。（原因：CORS 請求不是 http）。

實際結果

CORS 錯誤。無法從 index.html 訪問父目錄中的資產檔案夾

預期結果：

CORS 錯誤。無法從 index.html 訪問父目錄中的資產檔案夾

代碼在這里：

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BackpackPacker</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=Work Sans:[email protected]&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="../assets/style.css"
      type="text/css"
      media="all"
    />
    <script type="module" src="Backpack.js"></script>
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <header class="siteheader">
      <div class="site-title">BackpackPacker</div>
      <div class="site-description">All backpack packing, all the time.</div>
    </header>
    <main class="maincontent"></main>
    <footer class="sitefooter">
      <p>
        Demo project for JavaScript Essential Training, a LinkedIn Learning
        course.
      </p>
    </footer>
  </body>
</html>

背包.js

class Backpack {
  constructor(
    name,
    volume,
    color,
    pocketNum,
    strapLengthL,
    strapLengthR,
    lidOpen,
    dateAcquired,
    image
  ) {
    this.name = name;
    this.volume = volume;
    this.color = color;
    this.pocketNum = pocketNum;
    this.strapLength = {
      left: strapLengthL,
      right: strapLengthR,
    };
    this.lidOpen = lidOpen;
    this.dateAcquired = dateAcquired;
    this.image = image;
  }
  toggleLid(lidStatus) {
    this.lidOpen = lidStatus;
  }
  newStrapLength(lengthLeft, lengthRight) {
    this.strapLength.left = lengthLeft;
    this.strapLength.right = lengthRight;
  }
  backpackAge() {
    let now = new Date();
    let acquired = new Date(this.dateAcquired);
    let elapsed = now - acquired; // elapsed time in milliseconds
    let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
    return daysSinceAcquired;
  }
}

export default Backpack;

腳本.js

/**
 * Traverse the DOM tree using querySelector() and querySelectorAll()
 * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
 * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
 */

import Backpack from "./Backpack.js";

const everydayPack = new Backpack(
  "Everyday Backpack",
  30,
  "grey",
  15,
  26,
  26,
  false,
  "December 5, 2018 15:00:00 PST",
  "../assets/images/everyday.svg"
);

const main = document.querySelector(".maincontent");

const content = `
  <article  id="everyday">
    <figure >
      <img src=${everydayPack.image} alt="CORS 錯誤。無法從 index.html 訪問父目錄中的資產檔案夾" />
    </figure>
    <h1 >${everydayPack.name}</h1>
    <ul >
      <li >Volume:<span> ${
        everydayPack.volume
      }l</span></li>
      <li >Color:<span> ${everydayPack.color}</span></li>
      <li >Age:<span> ${everydayPack.backpackAge()} days old</span></li>
      <li >Number of pockets:<span> ${
        everydayPack.pocketNum
      }</span></li>
      <li >Left strap length:<span> ${
        everydayPack.strapLength.left
      } inches</span></li>
      <li >Right strap length:<span> ${
        everydayPack.strapLength.right
      } inches</span></li>
      <li >Lid status:<span> ${
        everydayPack.lidOpen
      }</span></li>
    </ul>
  </article>
`;

main.innerHTML = content;

../assets/style.css 中的 CSS 檔案

body {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", sans-serif;
}

figure {
  margin: 0;
}

.siteheader {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

.site-title {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-family: "Oswald", sans-serif;
  font-size: 5rem;
  font-weight: 200;
}

.siteheader:after {
  display: block;
  margin: 4rem 0;
  content: "???";
}

.maincontent {
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 60rem;
}

.page-header {
  margin-bottom: 3rem;
}

.page-header__heading {
  margin-top: -1rem;
  text-align: center;
}

.page-header:after {
  margin: 4rem auto;
  display: block;
  content: "";
  border-bottom: 3px solid black;
  width: 4rem;
}

.backpack {
  margin-bottom: 4rem;
  /* padding-bottom: rem; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 3rem;
}

.backpack:after {
  margin: 0 auto;
  padding-top: 4rem;
  display: block;
  grid-column: span 2;
  content: "";
  border-bottom: 3px solid black;
  width: 4rem;
}

.backpack__image {
  grid-row: span 2;
}

.backpack__name {
  margin-top: 2rem;
  margin-bottom: 0;
  padding-bottom: 2rem;
  font-size: 5rem;
  line-height: 1;
  text-transform: uppercase;
  border-bottom: 3px solid black;
}

.backpack__features {
  margin: 0;
  padding: 2rem 0 0 0;
  list-style-type: none;
}

.backpack__features li {
  padding: 0.2rem 0;
}

/* Subgrid. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid */
@supports (grid-template-columns: subgrid) {
  .backpack__features {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1rem;
  }

  .backpack__features li {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
  }
}

.lid-toggle {
  display: inline-block;
  border: 3px solid black;
  border-radius: 0.3rem;
  padding: 2rem;
  font-size: 1.6rem;
  cursor: pointer;
  background-color: white;
}
.lid-toggle:hover,
.lid-toggle:focus {
  background-color: hsl(0, 0%, 95%);
}

.lid-toggle:active {
  background-color: black;
  color: white;
}

.sitefooter {
  margin-top: 8rem;
  padding: 2rem;
  display: flex;
  justify-content: center;
  background: black;
  color: white;
}

CORS 錯誤。無法從 index.html 訪問父目錄中的資產檔案夾

uj5u.com熱心網友回復：

如果您收到 CORS 錯誤，并且您正在本地（通過檔案系統或 Live Server）訪問您的站點，則此錯誤通常意味著您的href路徑、src路徑或檔案層次結構有問題。如果您使用的是節點服務器，那么這個答案可能不適合您。

檔案系統和 Live Server 以不同的方式處理父目錄。

Live Server 使用您打開的檔案夾（在 VS Code 中）作為根目錄，并且不允許您轉到上面的父目錄。

假設您在 VS Code 中打開的檔案夾僅包含您的index.html檔案，而您的資產檔案夾位于其父目錄中。

在這種情況下，Live Server 將不允許您訪問資產檔案夾中的檔案。

通常，../會帶您到父目錄，但在 Live Server 中，如果您已經在“根”目錄（在 VS Code 中打開的檔案夾）中設定，則../不會帶您到任何地方。

這與您的本地檔案系統不同，在那里../您可以根據需要獲取盡可能多的父目錄，直到您到達根驅動器。

我的建議：

使您的檔案層次結構盡可能簡單。

將 index.html 放在專案的根檔案夾中，然后將資產保存在子檔案夾中，而不是父目錄中。

專案檔案夾

包含 index.html 和您的資產檔案夾

資產檔案夾

包含 script.js 和 style.css

然后，在您的 html 檔案中，將路徑更改為assets/style.css和assets/script.js

這將允許您的站點同時適用于 Live Server 和您的本地檔案系統。在線部署您的網站時，它還將使事情變得更容易。

編輯：您在 VS Code 中打開的任何檔案夾都將是您的根目錄，Live Server 將允許您從那里訪問檔案和所有子目錄。如果您無法將資產移動到專案目錄，請確保在 VS Code 中打開包含資產檔案夾的檔案夾。然后導航到您的 html 檔案并從那里啟動 Live Server。

uj5u.com熱心網友回復：

經過大量搜索，我發現這是 LiveServer 的 VSCode 功能。在包含子檔案夾的 JS 檔案夾中，我看到有一個 .vscode 檔案夾，其中包含一個檔案settings.json。在檔案中，我添加了根位置行。所以我的設定檔案看起來像這樣。

設定.json

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "liveServer.settings.root": "./"
}

在 VSCode 中，在 File 選單下，我選擇了“Add Folder To Workspace”并添加了 JS 檔案夾

CORS 錯誤。無法從 index.html 訪問父目錄中的資產檔案夾

現在，當我打開 VSCode 時，我單擊了通常用于“復制”的選擇不當的圖示，它會打開 VSCode 資源管理器。

CORS 錯誤。無法從 index.html 訪問父目錄中的資產檔案夾

所以我現在要做的就是在任何子檔案夾中打開 index.html 并右鍵單擊并選擇“在 LiveServer 中打開”

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/392095.html

標籤：javascript css 火狐直播服务器

上一篇：我們如何從R中的IMDB中抓取缺失值？

下一篇：我應該使用哪些工具進行雙向通信？