为什么我的网站导航可以在实时服务器上运行,但在部署时却不能运行

问题描述 投票:0回答:1

对于我的学校项目,我们正在使用 JavaScript 添加到简单网站的导航。我正在使用 Visual Studio Code 和实时服务器扩展。当我通过实时服务器扩展运行网站时,它工作正常。这里

但是,当我部署到 github 并访问该网站时,导航不会出现,并且出现 404 错误here

这是我的文件夹结构

this is my menu.js file that sits in the scripts folder

const root = "/WSOA3028A_2583750"

const menuItems = [
    {name: "Home", href: root + "/index.html"},
    {name: "Blog", href: `${root}/Blogs/index.html`},
    {name: "Essays", href: `${root}/Essays/index.html`},
    {name: "Portfolio", href: `${root}/Portfolio/index.html`},
    {name: "Design", href: `${root}/Design/index.html`},
    {name: "About", href: `${root}/About/index.html`},
];
export function initialise(currentPage){

    console.log("worked")
    const nav = document.querySelector("header > nav")
    const ul = document.createElement("ul")
    for(let menuItem of menuItems)
    {
        const li = document.createElement("li")
        if(currentPage != menuItem.name)
        {
            const a = document.createElement("a")
            a.innerText = menuItem.name
            a.setAttribute("href", menuItem.href)
            li.appendChild(a)

        }
        else{
            li.innerText = menuItem.name
        }
        ul.appendChild(li)
    }
    nav.appendChild(ul)

    
}

this is where i call the menu.js script in my index.html file that sits outside the folders

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Cameron Morgan">
  <meta name="description" content="This is the index page of the website displaying the portfolio and blogs for Cameron Morgan in the course Interactive Media  ">
  <meta name="robots" content="index,follow">
  <meta name="keywords" content="Web Development, Game Development, Interactive, Blog, Portfolio, Essay, Design">

    <meta property="og:title" content="Cameron Morgan Portfolio Website">
    <meta property="og:description" content="Welcome to Cameron Morgan's Portfolio Website, here you can find his portfolio of work, including games, websites, blogs, analysis.">
    
    <meta property="og:url" content="https://wits-digital-arts-interactive-media.github.io/WSOA3028A_2583750/">

  <link rel="icon" type="image/png" href="Images/coffee.png">
  <script type="module">
    import { initialise } from "./Scripts/menu.js";
    initialise("Home"); // Call the initialise function with a test argument
</script>
  <title>Interactive Media Website</title>

  
  


</head>

Chrome 抛出 CORS 错误

从源“null”访问“file:///C:/Users/camer/IM_GITHUB/WSOA3028A_2583750/Scripts/menu.js”处的脚本已被 CORS 策略阻止:仅协议方案支持跨源请求: http、数据、独立应用程序、chrome 扩展、chrome、https、chrome 不受信任。

加载资源失败:net::ERR_FAILED

javascript deployment cors http-status-code-404 web-development-server
1个回答
0
投票

这是一个部署问题。在本地看来,您的脚本文件夹名为

Scripts
,但在 GitHub 上它名为
scripts
。地址区分大小写。将 GitHub 上的脚本文件夹重命名为
Scripts
应该可以解决此问题。

© www.soinside.com 2019 - 2024. All rights reserved.