当前位置：首页 > news >正文

C++ 后端，Vue前端

news 2025/7/21 19:51:24

参考2篇博客
1-VUE、C++前后端调用
2-Vue解决CORS header ‘Access-Control-Allow-Origin’ missing及同源、跨域问题

这里给出App.vue代码

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'import axios from 'axios'
import { ref } from 'vue'const backendResponse = ref("bbbb")const callBackend = () => {axios.get('http://localhost:8080/api/hello').then(function(response){console.log("check msg");console.log(response.data);backendResponse.value = response.data}).catch(error => {console.error(error);});}
</script><template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" /><div class="hello"><button @click="callBackend">Call Backend</button><p v-if="backendResponse">{{ backendResponse }}</p></div></template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

这里给出服务端代码

#include "mainwindow.h"
#include "httplib.h"#include <QApplication>int main(int argc, char *argv[])
{//QApplication a(argc, argv);//MainWindow w;//w.show();//return a.exec();std::cout << "server start at http://localhost/8080" << std::endl;httplib::Server svr;svr.set_default_headers({{ "Access-Control-Allow-Origin" , "*" },{ "Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE"},{ "Access-Control-Max-Age", "3600"},{ "Access-Control-Allow-Headers", "*"},{ "Content-Type", "application/json;charset=utf-8"}});svr.Options("/api/hello", [](const httplib::Request& ,httplib::Response& resp) {std::cout << "OPTIONS ACCESS" << std::endl;resp.status = 200;});svr.Get("/api/hello", [](const httplib::Request& req, httplib::Response& res) {res.set_content("Hello from C++ backend!", "text/plain");});svr.listen("localhost", 8080);}