在R/Shiny中使用fetch读取本地www目录csv文件失败该如何解决

问题核心原因 #

• Shiny应用的www目录是静态资源默认根目录，启动后www下的文件会直接挂载到应用的根路由下，你原代码中fetch('./www/this_data.csv')的路径写法会请求不存在的路由，返回404导致无数据。
• 浏览器有同源安全限制，禁止网页通过file://协议直接读取本地磁盘的绝对路径文件，因此本地绝对路径写法必然失效。
• 原代码仅把读取到的CSV内容输出到了浏览器控制台，没有渲染到页面上，因此前端看不到数据展示。

可行方案1：修复前端fetch读取逻辑 #

如果需要在前端JS侧直接处理CSV数据，修改代码如下即可，本地开发和部署到shinyapps.io都可正常运行：

library(shiny)
library(shinyjs)
ui <- fluidPage(
  useShinyjs(),
  tags$div(
    tags$p("Reading file"),
    # 新增容器用来展示读取到的CSV内容
    tags$div(id = "csv_result"),
    tags$script("
      fetch('./this_data.csv')
       .then(response => response.text()) 
       .then(csvString => {
          const rows = csvString.split('\\n');
          let html = '<table border=\"1\">';
          // 拼接表格HTML渲染到页面
          rows.forEach((row, index) => {
            const cols = row.split(',');
            html += '<tr>';
            cols.forEach(col => {
              html += index == 0 ? `<th>${col}</th>` : `<td>${col}</td>`;
            })
            html += '</tr>';
          })
          html += '</table>';
          document.getElementById('csv_result').innerHTML = html;
       });
    ")
  )
)
server <- function(input, output, session) {}
shinyApp(ui, server)

注意：仍需要将this_data.csv放在项目根目录下的www文件夹中。

可行方案2：推荐的Shiny后端读取方案 #

如果后续需要在R侧处理CSV数据，更建议直接在后端读取，逻辑更简单，兼容性更好：

library(shiny)
ui <- fluidPage(
  tableOutput("csv_result")
)
server <- function(input, output, session) {
  output$csv_result <- renderTable({
    # 直接读取www目录下的CSV文件
    read.csv("./www/this_data.csv")
  })
}
shinyApp(ui, server)

内容的提问来源于stack exchange，提问作者PLA