Electron - #007 前端通过axios调用http请求的跨域问题

前端通过axios调用http请求的跨域问题

1 目标

前端通过axios调用http请求的跨域问题。

后端没有做cors，前度没有遇到跨域问题

2 步骤

2.1 nodejs后端代码

• server.js

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

// GET 接口
app.get('/api/getData', (req, res) => {
  res.json({ message: "Hello from GET" });
});

// POST 接口
app.post('/api/postData', (req, res) => {
  const data = req.body;
  res.json({ message: "Hello from POST", received: data });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

2.2 HelloWorld.vue

<!--
 * @Author: alan.lau
 * @Date: 2024-09-08 20:04:38
 * @LastEditTime: 2024-09-11 21:12:27
 * @LastEditors: alan.lau
 * @Description: 
 * @FilePath: \electron-demo\src\components\HelloWorld.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Cesium from 'cesium';
import axios from "axios";

defineProps<{ msg: string }>()

const count = ref(0)
var viewer: Cesium.Viewer | null = null;
const filePath = ref<string | null>(null);
const fileContent = ref<string | null>(null);
onMounted(() => {
  viewer = new Cesium.Viewer('cesiumContainer', {
    terrain: Cesium.Terrain.fromWorldTerrain(), // 地形数据
  });
});

const handleReadFileFromNode = async () => {
  const content = await window.electronAPI.readFile('D:\\work\\111.txt');  // 读取文件内容
  console.log(content)

};

const handleSelectFile = async () => {
  const path = await (window as any).electronAPI.openFileDialog();
  if (path) {
    filePath.value = path;

    // 可选：读取文件内容
    const content = await (window as any).electronAPI.readFile(path);
    fileContent.value = content;
  }
};

const getResult = ref(null);
const postResult = ref(null);

const fetchData = async () => {
  getResult.value = await window.electronAPI.getData();  // 调用后端的 GET 请求
};

const sendData = async () => {
  const postData = { title: 'foo', body: 'bar', userId: 1 };  // 模拟 POST 数据
  postResult.value = await window.electronAPI.postData(postData);  // 调用后端的 POST 请求
};

// 存储请求结果
const getResultVue = ref<any>(null);
const postResultVue = ref<any>(null);

// GET 请求示例
const axiosGetData = async () => {
  try {
    const response = await axios.get("http://localhost:3000/api/getData");
    getResultVue.value = response.data;
  } catch (error) {
    console.error("GET 请求错误:", error);
  }
};

// POST 请求示例
const axiosPostData = async () => {
  const postData = {
    data: "This is a test"
  }; // 示例数据

  try {
    const response = await axios.post("http://localhost:3000/api/postData", postData);
    postResultVue.value = response.data;
  } catch (error) {
    console.error("POST 请求错误:", error);
  }
};
</script>

<template>
  <!-- 纯前端 -->
  <button @click="axiosGetData">获取数据 (GET)</button>
  <button @click="axiosPostData">发送数据 (POST)</button>

  <p>GET 请求结果: {{ getResultVue }}</p>
  <p>POST 请求结果: {{ postResultVue }}</p>
  
  <!-- 后端获取给前端 -->
  <el-button type="primary" @click="fetchData">获取数据 (GET)</el-button>
  <el-button type="primary" @click="sendData">发送数据 (POST)</el-button>

  <p>GET 请求结果: {{ getResult }}</p>
  <p>POST 请求结果: {{ postResult }}</p>
  <el-button type="primary" @click="handleSelectFile">选择文件</el-button>
  <p>选中文件路径: {{ filePath }}</p>
  <p>文件内容:</p>
  <pre>{{ fileContent }}</pre>
  <h1>{{ msg }}</h1>
  <el-button type="primary" @click="handleReadFileFromNode">我是 ElButton</el-button>

  <el-container class="home-container">
    <el-header>
    </el-header>
    <el-main>
      <div id="cesiumContainer">
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

2.3 运行工程

  npm run dev