axios的详细用法以及后端接口代理

本文介绍如何使用Axios进行HTTP请求,包括安装、配置、GET和POST请求等,并演示了如何在Vue项目中集成Axios。

安装


使用 npm:

$ npm install axios

 

或者 使用 bower:

$ bower install axios

 

或者直接使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

main.js设置如下

引入axios

import axios from 'axios'

 

挂载到vue的原型

Vue.prototype.$http = axios

 

在webpack.config.js(config—>index.js)文件里设置代理  注意  新版文件会有修改

dev: {
    env: require('./dev.env'),
    port: 8080,  //设置访问的端口号
    autoOpenBrowser: true, //自动打开浏览器
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://10.10:8063', //设置调用接口域名和端口号别忘了加http
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/' //这里理解成用‘/api’代替target里面的地址,组件中我们调接口时直接用/api代替
                    // 比如我要调用'http://0.0:300/user/add',直接写‘/api/user/add’即可 代理后地址栏显示/
            }
        }
    }

 


执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地,上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 

 

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

 

创建实例 
可以使用自定义配置新建一个 axios 实例 
axios.create([config])

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

 

转载于:https://www.cnblogs.com/cmy1996/p/9160500.html

### Vue Axios 调用后端 API 权限拦截解决方案 在开发基于Vue的应用程序时,处理API请求中的权限问题至关重要。通过合理配置`axios`以及利用前端框架的功能可以有效管理这些情况。 对于权限拦截的需求,在发送HTTP请求之前加入身份验证令牌是一种常见做法。这可以通过创建一个自定义的Axios实例来完成,并在此过程中附加必要的认证信息到每一个发出的请求头中[^1]。 ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url timeout: 5000 // 请求超时时间 }); // request interceptor 添加 token 到 header 中 service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); ``` 当涉及到跨源资源共享(CORS)的问题时,可以在Vite配置文件(`vite.config.ts`)里设定代理服务器规则以绕过浏览器的安全策略限制[^2]: ```typescript export default defineConfig({ ... server: { proxy: { '/api': { target: 'http://your-backend-server-url', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } } }); ``` 此外,为了更好地应对未授权访问的情况,还可以设置响应拦截器用于捕获来自服务器的状态码4xx/5xx错误,并采取相应的措施,比如重定向至登录页面或提示用户会话已失效等操作。 ```javascript // response interceptor 处理返回状态码 service.interceptors.response.use( response => response.data, error => { if (error.response.status === 401 || error.response.status === 403) { // 清除本地存储的信息 localStorage.removeItem('token'); // 可选:跳转到登录页或其他逻辑 router.push({ name: 'Login' }); } return Promise.reject(error); } ); export default service; ``` 以上方法能够帮助开发者有效地管理和解决Vue项目中使用`axios`调用后端接口时可能遇到的各种权限相关挑战。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值