如何在Vue3项目中利用axios实现跨域

发布时间：2020-11-25 14:40:59 作者：Leah
来源：亿速云阅读：2546

如何在Vue3项目中利用axios实现跨域？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

实现跨域共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，将上述代码块写入其中；

如图：

如何在Vue3项目中利用axios实现跨域

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项目中利用axios实现跨域

浏览器页面：

如何在Vue3项目中利用axios实现跨域

剩下的就是把数据渲染到页面了。

实际示例

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/', //接口域名
        changeOrigin: true,       //是否跨域
        ws: true,            //是否代理 websockets
        secure: true,          //是否https接口
        pathRewrite: {         //路径重置
          '^/api/testcase/': '/api/testcase/'
        }
      }
    },
  },
}

flask接口地址:

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

看完上述内容，你们掌握如何在Vue3项目中利用axios实现跨域的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

如何在Vue3项目中利用axios实现跨域

相关阅读