實現跨域共3個步驟：

1，vue3.0根目錄下建立vue.config.js檔案；

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://you.163.com/',//介面域名
        changeOrigin: true,//是否跨域
        ws: true,//是否代理 websockets
        secure: true,//是否https介面
        pathRewrite: {         //路徑重置
          '^/api': ''
        }
      }
    }
  }
};

2，將上述程式碼塊寫入其中；

如圖：

3，將api介面放入請求的url中；

使用頁面的程式碼塊：

<template>
  <div>
    <H1>TEST</H1>
    <p>{{data}}</p>
  </div>
</template>
 
<script>
  import axis from 'axios';
  export default {
    name: 'Test',data() {
      return {
        data: {},};
    },methods: {
      getData() {
        axis.get('/api/xhr/search/queryHotKeyWord.json')//axis後面的.get可以省略；
          .then(
            (response) => {
              console.log(response);
              this.data = response;
            })
          .catch(
            (error) => {
              console.log(error);
        });
      },},mounted() {
      this.getData();
    },};
</script>
 
<style scoped>
 
</style>

程式碼解析：

瀏覽器頁面：

剩下的就是把資料渲染到頁面了。

實際示例

vue3 8080埠請求flask8081埠服務資料：

module.exports = {
  devServer: {
    host: '0.0.0.0',port: 8080,open: true,proxy: {
      '/api/testcase/': {
        target: 'http://127.0.0.1:8081/',//是否https介面
        pathRewrite: {         //路徑重置
          '^/api/testcase/': '/api/testcase/'
        }
      }
    },}

flask介面地址:

# http://127.0.0.1:8081/api/testcase/@app.route('/api/testcase/')def alltestcase(): pass

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。