- #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 / { ... }:
location块,它定义了当请求的URI与/(根目录或根路径)匹配时,Nginx应该如何处理这些请求。add_header ...:
'Access-Control-Allow-Origin' '*': 这允许任何源(域名、协议或端口)来访问这个资源。但是,通常在实际部署中,出于安全考虑,你会限制这个值到特定的源。'Access-Control-Allow-Headers' '*': 这允许跨域请求包含任何头部字段。但同样,为了安全,你可能希望限制这个值到特定的头部字段。'Cross-Origin-Embedder-Policy' 'require-corp': 这是一个新的安全策略,它要求跨域资源只能被同源的, , , , 等元素嵌入。'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;:
index.html文件。但在这个配置中,由于try_files指令,它可能不会经常执行。location @router { ... }:
@router的命名location块。它只会被try_files指令引用。rewrite指令,它将所有请求(^.*$是一个匹配任何字符串的正则表达式)重写为/index.html。last标志意味着在重写后,Nginx将重新搜索与新的URI匹配的location块。但由于我们已经处于@router块中,并且没有其他与/index.html匹配的location块,所以Nginx将直接返回/index.html文件。总结:这个配置是为了确保所有的前端路由(包括那些不存在的路径)都能正确地返回Vue应用的index.html文件。这是单页应用的标准配置,因为单页应用依赖于客户端的路由(即Vue Router)来导航不同的“页面”,而不是由服务器为每个“页面”提供不同的HTML文件。

