首先说明一点前端是不能直接访问服务器上面的文件的
如果想要在前端直接访问到服务器的文件需要通过nginx做一下转发，这样才能直接访问
比如我直接在服务器上的/data内新建code-generator/blocks/test/index.vue文件,

1631100125(1).jpg

那么我想在前端直接下载这个文件，怎么办？

• 其实这个时候如果你会后端的话，可以把code-generator/blocks/test/index.vue内容读成流然后输出到前端
• 如果直接不经过后端，想直接下载的话，需要通过nginx来配合

nginx配置访问文件端口

server {
        listen  5676;
        server_name localhost;

        location / {
            root  /data/code-generator;   # 此处对应的是 服务器存放文件的地址
            charset  utf-8;
            try_files $uri $uri/ /index.html;
            index index.html index.htm;
            autoindex on;
            autoindex_exact_size off;
            autoindex_localtime on;
        }

    }

这个时候你直接在浏览器上输入 服务器ip:端口 ex: 127.0.0.1:5676
由于我的blocks文件内是一个test文件，就会看到如下效果

1631097503(1).png

• 比如服务器上面的文件地址是/data/code-generator/blocks/test/index.vue，通过window.location.href下载，如果是文件夹的话是则不能通过window.location.href下载，除非把文件夹弄成压缩包

window.location.href = 'http://121.5.217.54:5676/blocks/test/index.vue'

跨域

用axios或者fetch去调用的话会存在跨域问题，还需要配置一下跨域的问题

• 跨域配置
  在指定server端口下新增配置，比如8000

server {
        listen       8000;
        ......
        location /blocks {
            proxy_pass http://localhost:5676/blocks;
            add_header 'Access-Control-Allow-origin' '*';
        }
}

fetch('http://具体ip:8000/blocks/test/index.vue').then(async res=> {
      const text = await res.text()
      console.log(text)
    })

如果是腾讯云服务器记得开防火墙端口

1641545678(1).png