因为 SSR server 中 HTML 的 script 地址是渲染自 client server 中 HTML 的 script 地址(server-render.js 中 context.url 和插入的 scripts 标签配置),那么 SSR server 在访问 client server 的静态资源 'a.js' 时的地址也是和 client server 访问 a.js 的地址相同,即 '/自定义基路径/a.js',那么 SSR server 在访问 'a.js' 时,SSR server 实际访问的地址也是 '/自定义基路径/a.js',那么自然 SSR server 无法正确访问到 client server 静态资源 a.js 的正确地址。
直接设置补全 client server 访问静态资源地址,即将 '/自定义基路径' 补全为 'http://127.0.0.1:8080',那么此时不管是 client server 还是 SSR server 访问 a.js 的地址都是一个源下的静态资源,即 client server 下的静态资源。(点我查看示例配置,其中 webpack output 地址必须引用该配置中的 assetPublicPath)
缘由
在 SSR server 中可通过
ajax
请求 client server 获得渲染信息。因为
SSR server
中 HTML 的script
地址是渲染自client server
中 HTML 的script
地址(server-render.js
中 context.url 和插入的scripts
标签配置),那么SSR server
在访问client server
的静态资源'a.js'
时的地址也是和client server
访问a.js
的地址相同,即'/自定义基路径/a.js'
,那么SSR server
在访问'a.js'
时,SSR server
实际访问的地址也是'/自定义基路径/a.js'
,那么自然SSR server
无法正确访问到client server
静态资源a.js
的正确地址。(以上隐含了一个服务端没有跨域限制的知识点)
配置:
解决方案:
webpack.server.config.js
设置代理,即SSR server
设置代理。直接设置补全
client server
访问静态资源地址,即将'/自定义基路径'
补全为'http://127.0.0.1:8080'
,那么此时不管是client server
还是SSR server
访问a.js
的地址都是一个源下的静态资源,即client server
下的静态资源。(点我查看示例配置,其中 webpack output 地址必须引用该配置中的 assetPublicPath)