vue使用axios时如何跨域

最新推荐文章于 2025-04-14 09:54:40 发布

snow_small

最新推荐文章于 2025-04-14 09:54:40 发布

阅读量349

点赞数

分类专栏：前端漫漫路文章标签： vue axios 跨域

本文链接：https://blog.youkuaiyun.com/snow_small/article/details/87705972

版权

前端漫漫路专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并使用Axios进行HTTP请求，包括将其注册到Vue原型上的步骤，以及如何在开发环境中通过配置解决跨域问题。同时，提供了具体的代码示例，展示了如何在组件中调用API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

cnpm install axios --save-dev

2、注册到vue中，main.js中

import axios from 'axios'

Vue.prototype.$axios = axios   // 将axios添加到原型

3、跨域解决方法，在config/index.js中，dev下的

proxyTable: {
        '/api': {
            target: 'http://localhost:56678',   // 设置api == http...
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''     // 重写，以api开头的都把挨批变为target，即http../index == api/index
            }
        }
    },

4、使用：这里的/api/shop/index == http://localhost:56678/shop/index

created() {    // 组件实例化完成，还未挂载
			this.$axios.get("/api/shop/index")
			          .then(res => {
			          	this.seller = res.data;
			          })
			          .catch(err => {
			          	console.log(err);
			          })
		}