404 Not Found(nginx)

news2024/11/16 9:49:35

    #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，即单页应用）的路由相关的请求。

location / { ... }:
- 这是一个Nginx的location块，它定义了当请求的URI与/（根目录或根路径）匹配时，Nginx应该如何处理这些请求。
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意味着只能同源的窗口可以相互访问。
try_files uriuri/ @router;:
- try_files指令会按顺序检查文件是否存在，并返回找到的第一个文件。
  - $uri: 首先，它会尝试直接提供请求的URI所对应的文件（如/path/to/file.js）。
  - $uri/: 如果直接的文件没有找到，它会尝试查找该URI对应的目录（并默认返回index.html，但由于下面的index指令，它可能不会这样做）。
  - @router: 如果以上两个都没有找到，Nginx将执行名为@router的location块中的指令。
index index.html;:
- 当请求一个目录时，而不是一个特定的文件时，Nginx会默认返回index.html文件。但在这个配置中，由于try_files指令，它可能不会经常执行。
location @router { ... }:
- 这是一个名为@router的命名location块。它只会被try_files指令引用。
- rewrite ^.*$ /index.html last;:
  - 这是一个rewrite指令，它将所有请求（^.*$是一个匹配任何字符串的正则表达式）重写为/index.html。
  - last标志意味着在重写后，Nginx将重新搜索与新的URI匹配的location块。但由于我们已经处于@router块中，并且没有其他与/index.html匹配的location块，所以Nginx将直接返回/index.html文件。