Vue使用axios方法实现跨域请求进行数据交互

最新推荐文章于 2024-08-02 00:06:36 发布

云·泽

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量994

点赞数 6

分类专栏： # Vue 文章标签： vue 跨域

本文链接：https://blog.csdn.net/qq_38038472/article/details/118469678

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用axios进行数据请求，并针对跨域问题，通过配置vue.config.js的proxy属性实现服务器间的代理转发。从全局引入axios、在组件中调用示例，到最后配置代理规则，一步步教你解决实际开发中的跨域挑战。

摘要由CSDN通过智能技术生成

第一步

axios插件的安装

npm install axios

第二步

在main.js里引入axios，这里引入即为全局引入

import axios from "axios"
Vue.prototype.$http = axios

在这里插入图片描述

在main.js里引入之后，既可以在vue组件中使用
例：HelloWord.vue页面

<el-button type="primary" @click="btnClick">主要按钮</el-button>

btnClick() {
  let url1 = 'https://api.coindesk.com/v1/bpi/currentprice.json';
  let url2 = 'http://localhost:9020/test';
  this.$http .get(url1).then(response => {
    console.log(response);
  })
}

初步实现了数据请求，但此时请求url2还存在着跨域请求问题；

第三步

注释：
既然使用axios直接进行跨域访问不可行，我们就需要配置代理了。代理可以解决的原因：因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据。

准备工作：安装所需中间件和插件等，比如axios
配置代理，对vue.config.js文件中的proxy属性，作如下处理：

module.exports = {
    devServer: {
        open: true,
        host: '0.0.0.0',    // 前端IP地址
        port: 8080,         // 前端端口号
        https: false,
        // 配置不同的后台API地址
        proxy: {
            '/api': {   // 请求的时候用这个/api就可以,无需在加协议、IP和端口; 例： http://localhost:9011/test请求时，只需使用/api/test即可
                target: `http://localhost:9011`,    // 接口服务IP地址
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': '/'    
                }
            }
        }
    }
}

第四步

在具体使用axios的地方，修改url如下即可(添加“/api”前缀)

btnClick() {
  let url1 = 'https://api.coindesk.com/v1/bpi/currentprice.json';
  let url2 = '/api/test';
  this.$http .get(url2).then(response => {
    console.log(response);
  })
}