Angular中如何正确配置服务器文件链接解决本地资源加载报错

• 这个问题既不是Angular框架不支持，也不只是链接填写错误，核心是浏览器的默认安全策略限制，加上你的路径写法不符合网页资源引用规范。

具体原因拆解 #

• 所有现代浏览器都禁止网页加载file://协议的资源，这是通用安全规则，和前端框架无关，目的是避免恶意网页窃取用户本地或局域网内的文件数据，没有绕过方案。
• 你写的\\my_serve\data\pdf\01.pdf是Windows SMB局域网共享路径的写法，浏览器识别后会自动转换为file://开头的本地资源协议，刚好触发上述安全限制，才会出现你看到的报错。

• 存储PDF的服务器需要先配置HTTP/HTTPS文件服务，把文件访问路径改成HTTP/HTTPS协议格式，示例如下：

// 替换为你服务器对应的HTTP访问地址
pdf_link_serve = "http://your-server-ip/data/pdf/01.pdf";

• 开发环境调试可以直接把PDF文件放到Angular项目的assets目录下，用相对路径引用即可正常加载：

pdf_link_serve = "/assets/pdf/01.pdf";

• 生产环境跨域访问时，需要在文件存储服务器侧配置正确的CORS跨域头，允许你的Angular应用域名访问对应资源。

内容的提问来源于stack exchange，提问作者dev.for.live