C++ 后端,Vue前端

参考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);

}



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可峰科技

生活不易

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值