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.parent, window.top等属性或方法来访问其他窗口。设置此值为same-origin意味着只能同源的窗口可以相互访问。

3. try_files uriuri/ @router;:

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

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文件。