vue+springboot 项目,用axios 前后端交互，并解决跨域问题

axios 是一个基于promise的HTTP库，用于浏览器<script标签引入>和nodejs的，与服务器进行通信的库，简单的讲就是可以发送get，post请求websocket 控制台安装，npm安装方法：npm install axiosnpm install - -save vue-axios在 main.js 中引入以下代码// vu...

Tian Never Settle

2139人浏览 · 2019-12-15 20:45:08

Tian Never Settle · 2019-12-15 20:45:08 发布

4.安全性

axios简介：

axios 是一个基于promise的HTTP库，用于浏览器<script标签引入>和nodejs的，与服务器进行通信的库，简单的讲就是可以发送get，post请求。

webstorm 控制台安装

【1】npm安装方法：（选择以下任意一种）

npm install axios
npm install - -save vue-axios

注：如果发送请求之后后端服务器不能接收到请求，则用以下安装方式，安装后重新启动

npm install axios --save -D

【2】在main.js 中引入以下代码

// vue 引入 axios

import axios from 'axios'


Vue.prototype.$axios = axios;

示例：

以下前端用的Vue后端用的Springboot

一、get请求示例

前端请求：（请求参数Json字符串）

methods: {
  search: function () {
    this.$axios.get('url/demo' ,{
      params:
        {
          name: this.i_name,
          time: this.i_time+'',
        }
    })
      .then(res => {
        console.log("请求成功，得到返回结果:" + res)

      })
      .catch(function () {
        console.log("请求失败！")
      });
  },
},

后端响应：(pom文件要引入alibaba 的Fastjson 依赖才能用JSONObject)

    @GetMapping("/requestPath")
    @ResponseBody
    public ResultBean summaryPath(@RequestBody JSONObject param, @Validated String req, Pageable page) {
        
        // 
        return resultBean;
    }

注解说明：@RequestBody 和 @ResponseBody

@RequestBody：用于将请求体中的数据绑定到方法的形参中，该注解应用在方法的形参上。
@ResponseBody：用于直接返回 return 对象，该注解应用在方法上。

@RestController 注解相当于@ResponseBody和@Controller的结合

二、post请求示例

前端请求：写法一

this.$axios.post('/my/converter',  {
        name: that.formLabelAlign.name,
        region: that.formLabelAlign.region,
        type: that.formLabelAlign.type
    }
).then(res => {
    console.log(res);
}).catch(function (err) {
    console.log(err)
})

前端请求：写法二

this.$axios({
  method: 'post',
  url: url,
  params: {
     id: this.data.id,
     name: this.data.name,
  }
})
.then(res =>{
    
})
.catch(function(err){
    
});

后端响应：

    @RequestMapping(value = "/addUpdate", method = RequestMethod.POST)
    @ResponseBody
    public boolean addUser(@RequestBody JSONObject param) {
        
        //
    
        return true;
    }

跨域问题

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

开发一些前后端分离的项目，比如使用 SpringBoot + Vue 开发时，后台代码在一台服务器上启动，前台代码在另外一台电脑上启动，此时就会出现跨域问题。
　　比如：

　　　　后台地址为 http://192.168.70.77:8081
　　　　前台地址为 http://192.168.70.88:8080
　　此时 ip 与端口号不一致，不符合同源策略，造成跨域问题。

若 浏览器的console控制台报如下错误，即为跨域的问题，

Access to XMLHttpRequest at 'http://***' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如下方显示的错误信息：

解决办法

方法一、web端解决方法：

1. vue项目的 main.js 中添加 axios.defaults.baseURL = '/api';

// 解决跨域
// 使每次请求都带一个 /api 前缀
axios.defaults.baseURL = '/api';

2. config->index.js 配置文件中的 proxyTable: {} 中添加如下代码：

    proxyTable: {
      "/api": {
        target: "http://localhost:8089",   // 要请求的后台地址
        ws: true,    // 启用websockets
        changeOrigin: true,    // 是否跨域
        pathRewrite: {
          "^/api": "" // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替
        }
      }
    },

注：若以上请求报404错误的话，把localhost换成本机域名试一下。

我的理解如下示例：main.js 的配置是把你的请求自动加上一个 /api 前缀成为 /api/my/converter，index.js 中的配置又把 /api 替换成了要请求的后台地址，即 http://localhost:8089/my/converter 。

// 解决跨域后的 发送请求写法
this.$axios.post('/my/converter',  {
        name: that.formLabelAlign.name,
        region: that.formLabelAlign.region,
        type: that.formLabelAlign.type
    }
).then(res => {
    console.log(res);
}).catch(function (err) {
    console.log(err)
})

方法二、Java端解决方法：

新建一个配置类如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}