TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发

目录

TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发

一、TDesign Vue Next Starter中后台项目模板

1.1、项目简介

1.2、使用文档

二、TDesign Vue Next Starter中后台生产环境配置与部署

2.1、vite.config.ts项目配置

三、如何部署生产模式才能渲染出页面

3.1、base基路径

3.2、vite5打包基于vue3的tdesign-vue-next项目的最基础原理

3.2.1、打包前

3.2.2、打包后

四、页面渲染与CORS跨源资源共享

4.1、CORS跨源资源共享

4.2、附常见：《HTTP header配置（跨域请求）》

五、页面渲染与CSP内容安全策略

5.1、CORS允许了但请求的具体资源是否安全可以用CSP策略来解决

5.2、配置CPS后端响应头代码

六、更多的服务后端网络安全开发

6.1、来源策略Referrer-Policy

6.2、不被浏览器发送Referer的情形：

6.3、前端主动在html文件中声明需要发送的发送Referer

原创不易，析构实现更不易，需要的就联系我购买

喜欢的，就收藏并点个赞，鼓励我继续技术的原创写作及经验分享：

---

一、TDesign Vue Next Starter中后台项目模板

1.1、项目简介

        TDesign Vue Next Starter 是一个基于腾讯官方TDesign，使用 Vue3、Vite、Pinia、TypeScript 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。

        特性：

• 内置多种常用的中后台页面

• 完善的目录结构

• 完善的代码规范配置

• 支持暗黑模式

• 自定义主题颜色

• 多种空间布局

• 内置 Mock 数据方案

• 支持TS

        TDesign 页面模板:
https://tdesign.tencent.com/starter/

1.2、使用文档

TDesign Starter 页面模板https://tdesign.tencent.com/starter/docs/vue-next/get-startedGitHub - Tencent/tdesign-vue-next-starter: A starter-kit for TDesign Vue Next UI componentsA starter-kit for TDesign Vue Next UI components. Contribute to Tencent/tdesign-vue-next-starter development by creating an account on GitHub.https://github.com/Tencent/tdesign-vue-next-starter

二、TDesign Vue Next Starter中后台生产环境配置与部署

2.1、vite.config.ts项目配置

        vite.config.ts配置相对完整规范，可做到开箱即用，其中vite的mode，即4种模式：

        vite默认在项目的根路径，让用户创建和配置“模式文件”。它们分别是：

        .env.test.  env.develepment、.env、env.site，含义为：测试模式、开发模式、生产模式、自定义模式。

       每种模式，都可以在项目的“配置文件”package.json中创建脚本编译和运行条目：

三、如何部署生产模式才能渲染出页面

3.1、base基路径

       基路径base，就是vite“用户配置接口”中，同时适用于“开发环境”和“生产环境”的站点部署的url的path的根路径；URL 由不同的部分组成：

        基路径base，就是你的站点的入口文件(默认为index.html)部署到生产环境的path to file的“逻辑请求”对应的“物理路径”，即告知vite打包时，应当将项目打包到怎样的站点路径下：

        本案，基路径base配置为：

        # 打包路径 根据项目不同按需配置：

        VITE_BASE_URL = /nosessionhtmls/vue-ssr/my-tnext-starter/dist/

       这一点，对于前端初学者，是一个坑，要特别注意！否则，你一开始，发出的请求就错了！！！

       举例：

站点入口：https://www.cpuofbs.com/nosessionhtmls/vue-ssr/my-tnext-starter/dist/index.html
基路径base：/nosessionhtmls/vue-ssr/my-tnext-starter/dist/

        进入站点后，vue3的Router路由器便生效了！路由驱动了站点内的菜单、按钮、链接等组件的事件及其行为，比如跳转等，譬如result/404、dashboard/base等请求的路由拦截、路由连接等。

3.2、vite5打包基于vue3的tdesign-vue-next项目的最基础原理

       如果你要学习该原理，最佳实践就是，对比打包前、打包后的结果：

3.2.1、打包前

       入口文件index.html :

3.2.2、打包后

       入口文件index.html :

        可见，如果上述基路径base设置不当，首页渲染可能出现意想不到的结果，甚至视觉上看不到结果。

四、页面渲染与CORS跨源资源共享

4.1、CORS跨源资源共享

        我们可以在生产环境的“模式配置”文件.env中，存在API的URL与你的站点的“源”是不一样的：

       请求的API的“源”和你的站点的“源”不一样，就设计到“CORS”跨源资源共享问题。

       当请求到达你的后端服务时，你的后端代码应当设置响应头，告知浏览器代理，请求的源允许在你的站点中执行其脚本：

DoCheckCorsOrigin(const Url: string; Request: THttpRequest; aReply: THttpReply; var Handled: Boolean);

       Access-Control-Allow-Origin: https://www.cpuofbs.com

       譬如，站点内跨源请求：

       Request URL: https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/get-menu-list-i18n?_t=1708676439865

       需要，服务后端代码配置响应头：

        否则。浏览器的调试工具控制台，将向你发出拒绝请求的信息并告知你具体的原因：

        Access to Axios Request at ''https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/get-menu-list-i18n?_t=1708671724342' from origin 'https://www.cpuofbs.com/'
has been blocked by CORS policy: No 'Access-Control-Allow-origin'header is present on the requested resource.

4.2、附常见：《HTTP header配置（跨域请求）》

HTTP header配置（跨域请求）_内容分发网络 CDN_用户指南_域名配置_高级配置HTTP header即HTTP消息头，是指在超文本传输协议（Hypertext Transfer Protocol，HTTP）的请求和响应消息中的消息头部分，定义了HTTP传输过程中的具体参数。跨域资源共享CORS(Cross-origin resource sharing)简称跨域访问，当A网站去访问B网站的资源时，就会发出跨域请求。https://support.huaweicloud.com/usermanual-cdn/cdn_01_0021.html

五、页面渲染与CSP内容安全策略

5.1、CORS允许了但请求的具体资源是否安全可以用CSP策略来解决

        如果你的后端服务对发起请求的原始资源（比如上例，是TDesign Vue Next Starterhttps://www.cpuofbs.com/nosessionhtmls/vue-ssr/my-tnext-starter/dist/index.html）代码指定了CORS策略（不配置该策略的站点跨域时是很危险的，意味着恶意站点代码随时可能侵入），那么其初始化器Initiator（详见浏览器开发工具请求资源的Initiator页签）的后续引用的资源，都必须要遵循该策略：

       如果，你的代码的CSP策略中，未对上述CORS的资源请求设置CSP的连接源标头值（connect-src），则浏览器会进行拦截并提示CSP的阻塞信息及阻塞原因：

index-C5WRK1nU.js:2570 Refused to connect to 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/get-menu-list-i18n?_t=1708671724342' because it violates the following Content Security Policy directive: "connect-src https://www.cpuofbs.com https://cpuofbs.com https://www.cpuofbs.com:8080 https://cpuofbs.com:8080 wss://www.cpuofbs.com".

index-C5WRK1nU.js:2570 Refused to connect to 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/get-menu-list-i18n?_t=1708671724342' because it violates the following Content Security Policy directive: "connect-src https://www.cpuofbs.com https://cpuofbs.com https://www.cpuofbs.com:8080 https://cpuofbs.com:8080 wss://www.cpuofbs.com". 

       从而你得到的是无头响应：

        那么，如何解决呢？如下：

5.2、配置CPS后端响应头代码

       硬编码响应头：

Content-Security-Policy: connect-src https://你的站点允许的源1 [空格] https://你的站点允许的源2 [空格]

六、更多的服务后端网络安全开发

6.1、来源策略Referrer-Policy

       Referrer-Policy主要用来对当前源下的所有请求的Request URL来源进行细分监管，后端服务代码设置该响应头，告知浏览器代理，分别应当如何处理。

       它与请求头Referer并无直接联系。并非所有的请求都会被浏览器附带Referer来源头发送到服务端，但，跨源的请求，通常浏览器会发送Referer标头，并可能同时发送Origin请求头。

       对请求的任何http(s)资源，响应头Referrer-Policy，可以有以下几种方案：

#告诉浏览器代理，发送Referer请求头的规则如下————
# 移除Referer请求头,后续的请求中，访问来源信息不再随请求一起发送到服务：
Referrer-Policy: no-referrer
# 目标安全级别降级时（比如初始化器链路从https安全请求 → 转到http不安全请求、从https转到 → file协议或data:URI）不发送Referer标头：
Referrer-Policy: no-referrer-when-downgrade
# 在Referer请求标头中，只发送“源”（尾部带/）：
Referrer-Policy: origin
# 跨源请求的资源仅发送其“源”：
Referrer-Policy: origin-when-cross-origin
# 同源请求才发送Referer请求头的地址，但跨源请求不发送Referer请求头
Referrer-Policy: same-origin
# 同等安全级别时，才发送“源”作为引用地址 (https → 转到https ，或http → 转到http)，但降级时不发送：
Referrer-Policy: strict-origin
# 同源请求，发送请求资源的完整URL；同安全级别的跨源请求，仅发送“源”；目标安全级别为降级时不发送 Referer请求头：
Referrer-Policy: strict-origin-when-cross-origin
# 无论是否同源，均发送，且发送不含searchParams参数的URL的Referer请求头：
Referrer-Policy: unsafe-url

6.2、不被浏览器发送Referer的情形：

       ◆请求协议为 "file://" 或者 "data" URI；
       ◆请求源为不安全协议http，Referer是https。

6.3、前端主动在html文件中声明需要发送的发送Referer

6.3.1、在head头部的<meta>元素进行申明

       申明的策略参见5.1中的方案；用属性字段name及其数值属性字段content标识。

       例如：

<meta name="referrer" content="origin" />

<link rel="stylesheet;origin" crossorigin href="/nosessionhtmls/vue-ssr/my-tnext-starter/dist/assets/index-UVIbHW0Y.css">

6.3.2、在body的元素中申明

<a href="http://example.com" referrerpolicy="origin">在body的元素中申明Referer</a>

<a href="http://example.com" rel="noreferrer">在body的a、area或link元素中将rel属性设置为noreferrer</a>

6.3.3、在css中申明

6.3.3.1、外部 CSS 样式表使用默认策略 (no-referrer-when-downgrade)，除非 CSS 样式表的响应消息通过 Referrer-Policy 首部覆盖该策略；
6.3.3.2、 <style> 元素或元素的style属性,遵从文档的referrer策略。

————————————————

原创不易，析构实现更不易，需要的就联系我购买

喜欢的，就收藏并点个赞，鼓励我继续技术的原创写作及经验分享：

部署vue element-ui admin报错(vue2)

centOS部署vscode_pulledup的博客-CSDN博客

————————————————