404 Not Found(nginx)

    #vue-router history 配置
    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
        add_header 'Cross-Origin-Opener-Policy' 'same-origin';
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
    

这段代码是Nginx的配置,主要用于处理与Vue.js应用(特别是使用Vue Router的SPA,即单页应用)的路由相关的请求。

  1. location / { ... }:

    • 这是一个Nginx的location块,它定义了当请求的URI与/(根目录或根路径)匹配时,Nginx应该如何处理这些请求。
  2. add_header ...:

    • 这些指令用于向HTTP响应头中添加或修改头部字段。
      • 'Access-Control-Allow-Origin' '*': 这允许任何源(域名、协议或端口)来访问这个资源。但是,通常在实际部署中,出于安全考虑,你会限制这个值到特定的源。
      • 'Access-Control-Allow-Headers' '*': 这允许跨域请求包含任何头部字段。但同样,为了安全,你可能希望限制这个值到特定的头部字段。
      • 'Cross-Origin-Embedder-Policy' 'require-corp': 这是一个新的安全策略,它要求跨域资源只能被同源的<iframe><embed><object><applet><webview>等元素嵌入。
      • 'Cross-Origin-Opener-Policy' 'same-origin': 这也是一个新的安全策略,它限制了哪些文档可以通过window.open()window.parentwindow.top等属性或方法来访问其他窗口。设置此值为same-origin意味着只能同源的窗口可以相互访问。
  3. try_files uriuri/ @router;:

    • try_files指令会按顺序检查文件是否存在,并返回找到的第一个文件。
      • $uri: 首先,它会尝试直接提供请求的URI所对应的文件(如/path/to/file.js)。
      • $uri/: 如果直接的文件没有找到,它会尝试查找该URI对应的目录(并默认返回index.html,但由于下面的index指令,它可能不会这样做)。
      • @router: 如果以上两个都没有找到,Nginx将执行名为@routerlocation块中的指令。
  4. index index.html;:

    • 当请求一个目录时,而不是一个特定的文件时,Nginx会默认返回index.html文件。但在这个配置中,由于try_files指令,它可能不会经常执行。
  5. location @router { ... }:

    • 这是一个名为@router的命名location块。它只会被try_files指令引用。
    • rewrite ^.*$ /index.html last;:
      • 这是一个rewrite指令,它将所有请求(^.*$是一个匹配任何字符串的正则表达式)重写为/index.html
      • last标志意味着在重写后,Nginx将重新搜索与新的URI匹配的location块。但由于我们已经处于@router块中,并且没有其他与/index.html匹配的location块,所以Nginx将直接返回/index.html文件。

总结:这个配置是为了确保所有的前端路由(包括那些不存在的路径)都能正确地返回Vue应用的index.html文件。这是单页应用的标准配置,因为单页应用依赖于客户端的路由(即Vue Router)来导航不同的“页面”,而不是由服务器为每个“页面”提供不同的HTML文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/749061.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

阿里云centos 7.9 使用宝塔面板部署.netcore 6.0

前言&#xff1a; 我有一个netcore6.0的系统接口和手机端程序的站点程序之前是部署在一台windows测试服务器的IIS站点中&#xff0c; 服务器最近压力太大扛不住了&#xff0c;买了一台centos7.9的阿里云服务器准备进行迁移。具体操作日记如下。 一、安装宝塔面板 这一步涉及…

一个去掉PDF背景水印的思路

起因 昨天测试 使用“https://github.com/VikParuchuri/marker” 将 pdf 转 Markdown的过程中&#xff0c;发现转换后的文件中会保护一些背景图片&#xff0c;是转换过程中&#xff0c;程序把背景图识别为了内容。于是想着怎么把背景图片去掉。 背景水印图片的特征 我这里拿…

花8000元去培训机构学习网络安全值得吗,学成后就业前景如何?

我就是从培训机构学的网络安全&#xff0c;线下五六个月&#xff0c;当时学费不到一万&#xff0c;目前已成功入行。所以&#xff0c;只要你下决心要入这一行&#xff0c;过程中能好好学&#xff0c;那这8000就花得值~ 因为只要学得好&#xff0c;工作两个多月就能赚回学费&am…

MySQL递归查询(with recursive)

背景 日常开发中经常会有那种 阶梯式 数据&#xff0c;比如做地图、菜单&#xff0c;裂变给上级、上上级分红等等这样的需求的时候 你需要找个一个对象的 上级&#xff0c;上上级&#xff0c;上上上级 建了一张很容易理解阶级的表&#xff0c;一目了然 很多时候我们的需求就是…

测试开发工程师需要掌握什么技能?

测试开发工程师是软件开发中至关重要的角色之一。他们负责编写、维护和执行自动化测试脚本、开发测试工具和框架&#xff0c;以确保软件的质量和稳定性。为了成为一名优秀的测试开发工程师&#xff0c;你需要掌握以下技能&#xff1a; 1. 编程技能&#xff1a; 作为测试开发工…

java设计模式(七)适配器模式(Adapter Pattern)

1、模式介绍&#xff1a; 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换成客户希望的另外一个接口。适配器模式通常用于需要复用现有的类&#xff0c;但是接口与客户端的要求不完全匹配的情况。它包括两种形式&…

鸿蒙面试心得

自疫情过后&#xff0c;java和web前端都进入了冰河时代。年龄、薪资、学历都成了找工作路上躲不开的门槛。 年龄太大pass 薪资要高了pass 学历大专pass 好多好多pass 找工作的路上明明阳关普照&#xff0c;却有一种凄凄惨惨戚戚说不清道不明的“优雅”意境。 如何破局&am…

不用翻墙,手把手教你用MAC本地版免费ComfyUI搭建Stable Diffusion工作流,让出图效率起飞

AI绘图如火如荼发展了这么久&#xff0c;从mj到SD webUI,再到时下最热门的Comfy UI。因为显存的问题对Mac用户一直不是很友好&#xff0c;阻碍了大部分设计师上手学习的道路。但是Comflowy解决了这个痛点。这是一款Mac系统可用本地版的sd&#xff0c;一键安装&#xff0c;让苹果…

【Sklearn驯化-聚类指标】搞懂机器学习中聚类算法评估指标,轮廓系数、戴维森堡丁指数

【Sklearn驯化-聚类指标】搞懂机器学习中聚类算法评估指标&#xff0c;轮廓系数、戴维森堡丁指数 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#…

OnlyOffice测评

官方链接&#xff1a; https://www.onlyoffice.com/zh/office-suite.aspx https://www.onlyoffice.com/zh/pdf-editor.aspx OnlyOffice&#xff1a;引领办公效率的新标杆 在数字化时代的浪潮中&#xff0c;办公软件已经成为我们日常工作中不可或缺的一部分。然而&#xff0c;…

马斯克的SpaceX星舰有多牛?我们离殖民火星还有多远?

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 埃隆马斯克是一位知名的企业家和工程师&#xff0c;他掌握着多家公司&#xff0c;涉及多个领域&#xff0c;包括电动汽车、太空探索、太阳能、脑…

入门JavaWeb之 Response 下载文件

web 服务器接收到客户端的 http 请求 针对这个请求&#xff0c;分别创建一个代表请求的 HttpServletRequest 对象&#xff0c;代表响应的 HttpServletResponse 对象 获取客户端请求过来的参数&#xff1a;HttpServletRequest 给客户端响应一些信息&#xff1a;HttpServletRe…

【LeetCode】五、哈希表相关:统计重复元素 + 找不同

文章目录 1、哈希表结构2、Java中的哈希表3、leetcode217&#xff1a;统计重复元素4、leetcode389&#xff1a;找不同5、leetcode496&#xff1a;下一个更大元素 1、哈希表结构 又叫散列表&#xff0c;存键值对&#xff0c;将key用哈希函数转为数组下标索引 当两个不同的key经…

多功能气象传感器的工作原理

TH-WQX9多功能气象传感器是一种集成了多种传感器技术的气象观测装置&#xff0c;旨在同时测量和监测大气中的多个气象要素&#xff0c;以提供全面、准确的气象信息。以下是关于多功能气象传感器的详细介绍&#xff1a; 技术原理 多功能气象传感器采用多种传感器技术相结合&…

[C++][设计模式][原型模式]详细讲解

1.动机 在软件系统中&#xff0c;经常面临这“某些结构复杂的对象”的创建工作&#xff1b;由于需求的变化&#xff0c;这些对象经常面临着剧烈的变化&#xff0c;但是它们却拥有比较稳定一致的接口如何应对这种变化&#xff1f;如何向“客户程序(使用这些对象的程序)”隔离出…

【FFmpeg】avformat_alloc_output_context2函数

【FFmpeg】avformat_alloc_output_context2函数 1.avformat_alloc_output_context21.1 初始化AVFormatContext&#xff08;avformat_alloc_context&#xff09;1.2 格式猜测&#xff08;av_guess_format&#xff09;1.2.1 遍历可用的fmt&#xff08;av_muxer_iterate&#xff0…

正版软件 | DupInOut Duplicate Finder:智能清理,让数据井然有序

在信息爆炸的时代&#xff0c;我们经常面临数据管理的挑战。DupInOut Duplicate Finder 是一款专为Windows 设计的重复文件查找工具&#xff0c;帮您快速识别并删除重复的文档、音乐、视频和照片&#xff0c;让您的计算环境更加清洁、有序。 精准查找&#xff0c;一键删除 DupI…

DM达梦数据库转换、条件函数整理

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

硬件开发笔记(二十二):AD21软件中创建元器件AXK5F80337YG原理图库、封装库和3D模型

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140007117 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

怎么扫描图片变成pdf格式?办公人士值得收藏的宝藏工具

将图片扫描并转换为PDF格式可以通过多种途径实现&#xff0c;无论是使用专业的扫描仪还是智能手机&#xff0c;都有相应的方法。 PDF 是什么&#xff1f; PDF&#xff0c;全称为 Portable Document Format&#xff08;便携式文档格式&#xff09;&#xff0c;是由Adobe System…