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

野性酷女 2022-05-22 02:24 253阅读 0赞

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);    
    \}    
\}