前端代码在一台电脑上，后端在另一台电脑，怎么在前端电脑上调用后端编写的接口

可以使用跨域资源共享（CORS）或 JSONP（仅限GET请求）在前端电脑上调用后端编写的接口。其中，CORS是一种通过在服务器上设置头信息来允许跨源请求的机制，而JSONP则是利用script标签的src属性来加载一个跨域的JavaScript文件，并在其中定义一个回调函数来处理返回的数据。具体实现的代码可以参考相关文档或教程。

相关问题

两台电脑，一台前端，一台后端

### 配置两台电脑分别为前端和后端开发环境

#### 找到并编辑 hosts 文件
为了使前端能够正确识别不同的后端项目，在每台机器上的操作系统中存在一个名为 `hosts` 的文件，该文件用于映射主机名到 IP 地址。对于 Windows 用户来说，这个文件位于 `C:\Windows\System32\drivers\etc\hosts`; 对于 macOS 和 Linux 用户，则可以在 `/etc/hosts` 中找到它[^1]。

#### 设置网络连接
确保前后端所在的两台计算机处于相同的局域网内，并能互相 ping 通对方的 IP 地址以验证连通性。这一步骤非常重要，因为只有在同一网络环境下才能顺利建立通信链路[^3]。

#### 启动后端服务
在其中一台计算机上部署所需的后端应用程序和服务。根据所选的技术栈（如 Java, Python 等），安装相应的运行时环境以及必要的依赖库。启动这些应用之后，它们应当监听特定端口等待来自客户端请求的到来。

#### 构建前端工程并与后端对接
另一台计算机则专注于搭建前端项目的开发环境。这里涉及到 HTML/CSS/JavaScript 编写界面部分的工作。为了让前端代码成功调用远程API接口，需调整 CORS (Cross-Origin Resource Sharing) 政策允许跨源资源共享；或者利用代理服务器转发HTTP 请求给目标后端地址。此外，还可以修改前端项目的配置文件中的 API URL 来指向实际提供服务的那个IP 及其对应的端口号。

// 示例：Vue CLI 项目下的 vue.config.js 修改 devServer.proxy 属性
module.exports = {
    devServer: {
        proxy: 'http://backend-ip-address:port'
    }
};

现在我已经在另一台服务器上部署了kkfileview,所以请写出具体的后端接口和前端代码

好的，以下是具体的后端接口和前端代码示例：

后端接口（使用 Python Flask 框架编写）：

from flask import Flask, request, jsonify
from flask_cors import CORS
from kkfileview import KKFileView

app = Flask(__name__)
CORS(app)

@app.route('/api/fileview')
def fileview():
    # 获取前端传来的文件路径
    filepath = request.args.get('filepath')
    # 调用 kkfileview 库生成预览链接
    fileview = KKFileView(filepath)
    # 返回预览链接
    return jsonify({
        'url': fileview.get_url()
    })

前端代码（使用 Vue.js 框架编写）：

<template>
  <div>
    <input type="text" v-model="filepath" placeholder="请输入文件路径">
    <button @click="preview">预览</button>
    <div v-if="previewUrl">
      <iframe :src="previewUrl"></iframe>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      filepath: '',
      previewUrl: ''
    };
  },
  methods: {
    preview() {
      axios.get('/api/fileview', {
        params: {
          filepath: this.filepath
        }
      })
      .then(response => {
        this.previewUrl = response.data.url;
      })
      .catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

以上代码仅供参考，具体实现可以根据项目需求进行调整。