前端通过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