VUE之axios使用，跨域问题，拦截器添加Token

已于 2023-08-06 02:03:59 修改
阅读量597 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-07-24 02:43:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23095607/article/details/131873184
版权

参考资料：

参考视频

视频资料及个人demo

Axios中文文档

VUE之基本部署及VScode常用插件

VUE之基本组成和使用

VUE之Bootstrap和Element-UI的使用

准备工作：

  • 关于SpringBoot和SpringCloud的搭建，以及mybatis-plus的整合见本人之前的CSDN博客，下面编写get请求和post请求
  • 编写Controller如下：
package com.example.springbootjwtback.UserController;

import com.example.springbootjwtback.entity.ResponseResult;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

/**
 * @program: springboot-jwt-back
 * @description:
 * @author: wjl
 * @create: 2023-07-24 00:10
 **/
@Controller
@Slf4j
@ResponseBody
public class TestController {

    @GetMapping("testGet/{name}")
    public ResponseResult testGet(@PathVariable("name") String name){
        log.info(name);
        GetEntity entity = new GetEntity("后端返回name", "后端返回age");
        return new ResponseResult(ResponseResult.OK,entity);
    }

    @PostMapping("testPost")
    public ResponseResult testPost(@RequestBody PostEntity entity){
        log.info(entity.toString());
        List<PostEntity> list = new ArrayList<>();
        list.add(new PostEntity("2021-02-03","peter","山西省"));
        list.add(new PostEntity("2021-02-04","alise","河北省"));
        list.add(new PostEntity("2021-02-05","lisa","北京市"));
        return new ResponseResult(ResponseResult.OK,list);
    }
}

@Data
@NoArgsConstructor
@AllArgsConstructor
class GetEntity{
    private String name;
    private String age;
}

@Data
@NoArgsConstructor
@AllArgsConstructor
class PostEntity{
    private String date;
    private String name;
    private String address;
}
  • 编写 返回类
package com.example.springbootjwtback.entity;

import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @program: springboot-jwt-back
 * @description: 返回实体
 * @author: wjl
 * @create: 2023-07-09 15:52
 **/
@Data
@NoArgsConstructor
public class ResponseResult {

    /**
     * 表明该请求被成功地完成，所请求的资源发送到客户端
     */
    public static final Integer OK = 200;
    /**
     * 请求要求身份验证，常见对于需要登录而用户未登录的情况。
     */
    public static final Integer UNAUTHORIZED = 401;
    /**
     * 服务器拒绝请求，常见于机密信息或复制其它登录用户链接访问服务器的情况。
     */
    public static final Integer FORBIDDEN = 403;
    /**
     * 服务器无法取得所请求的网页，请求资源不存在。
     */
    public static final Integer NOT_FOUND = 404;
    /**
     * 服务器内部错误。
     */
    public static final Integer SERVER_ERROR = 500;

    private Integer code;
    private String msg = "";
    private Object data = new int[0];


    public ResponseResult(Integer code) {
        this.code = code;
    }

    public ResponseResult(Integer code, Object data) {
        this.code = code;
        this.data = data;
    }

    public ResponseResult(Integer code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }
}

前后端分离跨域问题解决：

  • 跨域定义：当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
  • 解决：当前后端分离，拥有各自的URL后，前端访问后端就形成了跨域问题；解决方法也很简单，只需要在Controller上添加注解：
@CrossOrigin(origins = {"*", "null"})//  解决跨域问题

Axios的使用：

1.官方文档介绍

 2.Axios安装和使用

  • 输入指令进行安装

npm install axios

  •  在Vue的<Script>部分中进行引入，而不是在main.js中使用

import axios from "axios";

  •  在之前的例子基础上，修改  clicktest 方法,取后端数据进行更新
    clicktest() {
      alert("come in");
      this.selfName = "更新后张三";
      this.student = { name: "更新后name", age: "更新后age" };
      axios({
        url: "http://localhost:8888/testGet/张三",
        method: "GET",
      }).then(res => {
        console.log(res.data);
        this.student  = res.data.data;
      })
    },

 

  •  在之前的基础，修改 testsubmit 方法，取后端数据进行更新
    testsubmit(){
      alert("come in");
      axios({
              url: "http://localhost:8888/testPost",
              method: "POST", 
              data: {
                date: "2022-02-02",
                name: "张三",
                address: "hebei"
              }
          }).then(res => {
            this.tableData = res.data.data
           })
    }

 

 

  •  点击验证

 

Axios拦截器使用

1.官方文档介绍

  • Axios拦截器是Axios功能的一部分，可以在网络请求时，在请求前、后进行操作，如在请求前添加token，以及在请求后进行页面的跳转等操作
  • Axios拦截器官方文档,具体结构如下

 2.Axios拦截器的使用

1)、准备工作
  • 添加接口

    @PostMapping("interpost")
    public ResponseResult interpost(@RequestBody GetEntity entity,@RequestHeader("token") String token){
        log.info(entity.toString());
        log.info("token:"+token);
        List<PostEntity> list = new ArrayList<>();
        list.add(new PostEntity("2021-02-03","peter","山西省"));
        list.add(new PostEntity("2021-02-04","alise","河北省"));
        list.add(new PostEntity("2021-02-05","lisa","北京市"));
        return new ResponseResult(ResponseResult.OK,list);
    }

    @PostMapping("interget")
    public ResponseResult interget(@RequestBody GetEntity entity,@RequestHeader("token") String token){
        log.info(entity.toString());
        log.info("token:"+token);
        List<PostEntity> list = new ArrayList<>();
        list.add(new PostEntity("2021-02-03","peter","山西省"));
        list.add(new PostEntity("2021-02-04","alise","河北省"));
        list.add(new PostEntity("2021-02-05","lisa","北京市"));
        return new ResponseResult(ResponseResult.OK,list);
    }

2)、VUE项目中添加拦截器
  • 在上述配置好Axios的前提下
  • 在VUE项目中，src文件夹📂下创建目录，如：http

  •  在http目录下创建一个js，如interceptors.js,并填写以下内容
import axios from 'axios'

const http = axios.create({
    baseURL: 'http://localhost:8888',
    // timeout: 4000
    
})

export const get = (url, param) => {
    return http.get(url, param)
}
export const post = (url, param) => {
    return http.post(url, param)
}
export const put = (url, param) => {
    return http.put(url, param)
}
export const del = (url, param) => {
    return http.delete(url, param)
}



// 配置请求拦截器
http.interceptors.request.use(
    config => {
        config.headers = {
            // 每次请求前带上Token
            token: "xxxxxxxxxxxxxxxx"
        }
        return config;
    },
    err => Promise.reject(err)
);

// 这是返回的拦截
// 配置响应拦截器，主要做登录过期的处理，后端在解析token失效时返回401
http.interceptors.response.use(res => {
    // 登录过期，跳转到登录页面
    if (res.data.code == 401) {
        console.log("认证失败");
    }
    return res;
}, err => {
    return Promise.reject(err)
});

  •  在需要拦截器的地方进行引入，如下面引入了get和post带有拦截器的请求
import { post, get } from '../http/interceptors'

 

  • 然后添加两个测试按钮

      <button @click="interpost">测试过滤器post</button>
      <button @click="interget">测试过滤器get</button>

  • 使用拦截器封装的方法，进行后台访问
    interpost() {
      alert("/interpost");
      //json方式
      const data = {
        "name": "张三",
        "age": "18"
      };
      post('/interpost', data).then(res => {
        console.log(res.data.data);
      })
    },
    interget() {
      alert("interget");
      post('/interget', this.student).then(res => {
        console.log(res.data.data);
      })
    },

 

 

  • 然后运行 npm run serve ,点击测试按钮进行访问

PH = 7
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue中axios解决跨域问题和拦截器的使用方法
01-19
vue中axios不支持vue.use()方式声明使用。 所以有两种方法可以解决这点： 第一种： 在main.js中引入axios，然后将其设置为vue原型链上的属性，这样在组件中就可以直接 this.axios使用了 import axios from 'axios';...
vue axios拦截器请求头设置token 跨域，vue.config设置代理 无效的解决办法
H_ungry的博客
04-08 7330
vue axios拦截器请求头设置token 跨域，vue.config设置代理 无效的解决办法
axios的安装和使用
热门推荐
一个热爱技术的程序猿
11-29 7万+
文章目录一、axios介绍二、安装axios三、 案例 一、axios介绍 什么是 axios? Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性: 1、从浏览器中创建 XMLHttpRequests 2、从 node.js 创建 http 请求 3、支持 Promise API 4、拦截请求和响应 5、转换请求数据和响应数据 6、取消请求 7、自动转换 JSON 数据 8、客户端支持防御 XSRF 浏览器支持： 二、安装axios 方法一：速.
[Vue3] 请求拦截器里配置token
最新发布
weixin_40874076的博客
05-24 477
【代码】[Vue3] 请求拦截器里配置token。
Axios设置token到请求头的三种方式
qq_46073180的博客
02-05 7910
Axios设置token到请求头中的三种方式
axios拦截器和token
ioncannontic的博客
07-07 641
axios拦截器和token
【Token】使用HandlerInterceptor拦截器解决Vue项目中跨域时预请求问题
qq_61903414的博客
06-05 990
在项目中使用token取代session实现登录鉴权时，Vue中每次请求都会带有携带token的请求头，此时前端会发送两次请求，在跨域请求中，浏览器会首先发送一个预检请求（Preflight Request）来检查服务器是否允许跨域请求。预检请求是一个 OPTIONS 请求，其中包含一个头部信息，用于列出实际请求中会包含的请求头。服务器需要正确响应预检请求，并在响应中包含头部信息，以允许实际请求中包含列出的请求头。
vue+axios全局添加请求头和参数操作
11-20
在封装的axios服务中添加请求拦截器，检查本地Cookie中是否存在Token，如果存在则将其添加到请求头的Authorization字段中。例如： ```javascript import VueCookie from 'vue-cookie'; import router from './...
vue中axios请求的封装实例代码
10-17
axios的强大之处在于它的拦截器功能，允许我们在请求发送前或响应接收后执行额外的操作。例如，添加请求拦截器来在每个请求中附加token（假设它存储在localStorage中）： ```javascript axios.interceptors.request...
详解vue中axios请求的封装
10-17
例如，可以在请求拦截器中添加token，确保每次请求都携带认证信息： ```javascript // 请求拦截器 axios.interceptors.request.use( config => { const token = localStorage.getItem('token'); // 假设token存储...
vue路由导航守卫和请求拦截以及基于node的token认证的方法
10-17
这可以通过在Axios或fetch等库中设置拦截器来实现。在前端，我们可以设置请求拦截器来在每个请求中附加Token，确保只有经过认证的用户才能访问服务器资源。 3. **基于Node.js的Token认证**： 使用JWT（JSON Web ...
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
10-17
在前后端分离的架构中，Vue.js作为前端框架与Spring Boot作为后端服务进行交互时，常常会遇到跨域和Session、Cookie失效的问题。本文将详细介绍如何解决这些问题。 首先，跨域是由于浏览器的安全策略限制，同一源...
vue 使用axios 数据请求第三方插件的使用教程详解
12-04
例如，添加请求拦截器检查和处理token： ```javascript axios.interceptors.request.use(config => { // 在每个请求中添加token，如果存在的话 const token = localStorage.getItem('token') if (token) { ...
vue-axios.zip
08-30
Axios提供了一个机制，可以添加请求拦截器来在发送请求之前执行某些操作。在`main.js`中配置： ```javascript Axios.interceptors.request.use( config => { // 添加请求头、加载提示等 return config }, ...
vue项目中axios使用详解
08-28
例如，我们可以在请求拦截器中添加 token，或者在响应拦截器中处理错误。 instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求...
vue axios v0.19.2 版本，java 開發 前端 下載
01-17
例如，添加响应拦截器检查状态码： ```javascript axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { // handle unauthorized access } return ...
vue 前端配置token遇到跨域问题，跨域解决方法
zhaoyy0513的博客
10-10 3391
1.因为默认配置文件vue.config.js的时候目标主机地址已经改成/api // 修改配置后一定要 重新npm run serve !!! module.exports = { devServer: { // vue项目启动时的ip地址和端口 host: "localhost", port: 8000, proxy: { // 匹配所有以 /api 开头的url "/api": { // 请求的目标主机 t
vue 请求携带token
qq_45760960的博客
09-15 3579
在Vue中，发送请求需要使用axios库，本文将详细介绍如何在Vue中发送请求携带Token。总的来说，在Vue中发送请求携带Token需要配置axios拦截器和设置请求头信息，也可以使用Vuex来管理Token信息，以便在请求时获取Token信息。在需要发送请求的组件中，可以使用Vuex的getters获取Token信息，再将其拼接到请求头中发送请求。上面代码中，使用Vuex的getters获取Token信息，并在请求头中携带了Token信息。在Vuex的store.js文件中，保存Token信息。
自定义请求头出现CORS 跨域问题 springboot
qq_39967911的博客
02-16 1682
前后端分离项目,前端vue+elementUI 后台springboot ,由于前端在请求头中添加了token信息，就是Authorization字段,导致后台接收不到，查了一些资料,解决了我这个问题，下面是解决方案: 添加一个filter 用于解决跨域问题 package com.filter; import com.enums.ColorEnum; import com.utils.printColorUtil; import org.springframework.core.annotation.O
vue3 axios拦截器使用token
06-28
### 回答1： 请问您的问题是如何在Vue3中使用axios拦截器来添加token吗？如果是这样的话，可以通过以下代码来实现： 首先，在main.js中引入axios和设置拦截器： import axios from 'axios'; // 设置baseUrl axios.defaults.baseURL = 'http://localhost:8000/'; // 设置拦截器 axios.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers.authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); } ); 然后，您可以在代码中使用axios请求，并且该请求中会自动带上token： // 发起一个有token的GET请求 axios.get('/api/user').then(response => { console.log(response); }).catch(error => { console.log(error); }); ### 回答2： 在Vue3中使用axios拦截器来为每个HTTP请求设置token是一种常见实践。Axios拦截器可以帮助我们在请求发送之前或响应返回之前拦截，并在拦截器中添加必要的数据，如token。为了在Vue3中使用Axios拦截器为每个HTTP请求设置token，下面的内容将提供一些具体方法。 首先，我们需要安装Axios和Vue3，安装方法为： ```vue3 # 安装vue3 npm i vue@next -S # 安装axios npm i axios -S ``` 然后，我们需要在Vue3应用中创建一个Axios实例，代码如下： ```vue3 import axios from 'axios'; const api = axios.create({ baseURL: 'http://localhost:3000', }); export default api; ``` 在应用程序中，我们可以在需要发送HTTP请求的组件中导入并使用此api实例。 接下来，我们需要在Axios实例中创建一个拦截器。拦截器拦截HTTP请求并在其中添加必要的headers。在这里，我们添加一个头部，它包含一个名为“Authorization”的令牌。代码如下： ```vue3 api.interceptors.request.use((config) => { config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); return config; }); ``` 通过使用这个拦截器，我们可以在每个HTTP请求中自动添加一个名为“Authorization”的头部，它包含了从localStorage中获取的令牌。 在这里，我们还要考虑到token可能会过期，因此我们还可以添加一个拦截器检查HTTP响应。如果响应包含401状态码，我们会强制用户重新登录以获取新的token。代码如下： ```vue3 api.interceptors.response.use( response => response, error => { if (error.response.status === 401) { localStorage.removeItem('token'); router.push('/login'); } return Promise.reject(error); }); ``` 在这个拦截器中，我们首先检查响应是否包含401状态码。如果是，我们清除localStorage中的token并强制用户重新登录。 总之，Vue3中使用Axios拦截器为每个HTTP请求设置token是一种常见实践，并且可以非常轻松地实现。借助Axios的拦截器，我们可以自动为每个HTTP请求设置token，并在token过期时强制用户重新登录。 ### 回答3： 在Vue3中使用Axios拦截器来使用token进行身份验证是一种非常常见的做法。以下是详细的步骤： 第一步：安装Axios和Vue-Router 安装Axios和Vue-Router： ``` npm install axios vue-router --save ``` 该命令会将axios和vue-router安装到项目中。 第二步：创建Axios实例和拦截器 创建一个名为axios.js的新文件，并在其中添加以下代码： ```javascript import axios from "axios"; import router from "@/router"; const axiosInstance = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL }); axiosInstance.interceptors.request.use(config => { const token = localStorage.getItem("token"); if (token) { config.headers["Authorization"] = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); }); axiosInstance.interceptors.response.use(response => { return response; }, error => { if (error.response.status === 401) { router.push("/login"); } return Promise.reject(error); }); export default axiosInstance; ``` 在这里，我们创建了一个Axios实例，并在请求中添加了一个拦截器来检查本地存储中是否有token。如果存在，则将其添加到请求头中。此外，我们还添加了一个拦截器来处理401未授权错误响应，并重定向到登录页面。 第三步：在Vue组件中使用Axios实例 确保我们在请求数据时始终使用我们创建的Axios实例。为此，我们需要在组件中导入该实例： ```javascript import axiosInstance from "@/axios"; ``` 我们现在可以像这样在组件中使用Axios： ```javascript axiosInstance.get("/users") .then(response => { console.log(response); }) .catch(error => { console.log(error); }); ``` 现在，我们已经成功地设置了Axios拦截器来使用token进行身份验证。我们可以在Axios实例中添加其他拦截器，以满足特定的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PH = 7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值