前段向后端传递数据请求地址配置问题（springboot+vue）-阿里云开发者社区

前段向后端传递数据请求地址配置问题（springboot+vue）

2022-12-08 168

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前段向后端传递数据请求地址配置问题（springboot+vue）

1 .前端向后端传递数据问题

前提工作：

写好springboot后端controller如下

package com.peng.contriller;
import com.peng.common.Result;
import com.peng.pojo.User;
import com.peng.service.UserService;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;
    @PostMapping("/save")
    public Result save(@RequestBody User user){
        if (user.getPassword()==null){
            user.setPassword("123456");
        }
        boolean save = userService.save(user);
        if (save){ return Result.success();}
        else{
            return Result.error("500","新增失败");
        }
    }
}

server.port=8082

若要请求后端地址http://localhost:8082/user/save

写好vue前端，使用axios交互，需要引入axios

在vue项目中创建request.js文件引入，并编写相关配置

import axios from 'axios'
const request = axios.create({
    baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default request

前端相关请求

此时前端请求地址变为/api/user/save

由于存在跨域问题需要在添加跨域配置在vue项目添加vue.config.js

// 跨域配置
module.exports = {
  devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
    port: 9876,
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://localhost:8082',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    }
  }
}