vue2.0-axios-post的使用，以及前后台跨域搭配

关注

原创最新推荐文章于 2026-03-11 02:01:45 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Vue使用axios二次封装、解决跨域问题在项目中，axios 进行二次封装可以更加方便的使用 Ajax 请求，提高代码复用性和维护性。同时可以封装统一的请求与响应拦截处理。在实际开发过程中，浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后，官方推荐使用axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。阅读详情

1.安装axois

2.main.js引入并配置

import axios from 'axios'
Vue.prototype.$ajax= axios
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.baseURL = "http://xxxx.natapp1.cc/xm"

3.POST提交参数，POST提交参数的格式有严格要求，如果前后台搭配不当，就会出现问题。根据参数传递的数量，有两种POST的提交方式。

（1）POST参数少的时候

postTest(){
//参数少
var param = new URLSearchParams();
param.append('emailAccount','xxx996537@qq.com');
this.$ajax({
method: 'post',
url: '/v_register',
data:param
})
.then(function(response){
console.log(response.data)
alert("post success!");
})
.catch(function(error){
console.log(error);
})

}

此时对应的后端接收参数格式为：

@PostMapping("/v_register")
public Result v_register(String emailAccount){}

（2）POST参数多的时候

//参数多 ,构造json:

data{'id':'1','name':'小明'…}

this.$ajax({
method: 'post',
url: '/v_register',
data:data
})
.then(function(response){
console.log(response.data)
alert("post success!");
})
.catch(function(error){
console.log(error);
})

此时对应的后端接收参数格式为：

@PostMapping("/v_registers")

public Result v_register(Object user){}

4.后端SpringBoot配置跨域

（1）将SpringBoot的版本调到2.0或者以下

（2）配置Config

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
* @Auther: Chandler
* @Date: 2018/6/11 15:43
* @Description: 配置跨域
*/
@Configuration
public class CorsConfig{

private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1
corsConfiguration.addAllowedHeader("*"); // 2
corsConfiguration.addAllowedMethod("*"); // 3
return corsConfiguration;
}

@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
}