在使用Vue框架时首选axios进行请求处理,我们可以对vue-axios进行在封装这样可以统一进行请求和相应的处理,自定义响应。跨域请求可以使用vue-jsonp发送jsonp请求,具体怎么操作这里就不介绍了,还可以封装axios的请求头进行处理跨域。跨域的处理需要前端处理,服务器后端也需要进行处理。
axios.js 文件如下:
可以参考这个连接https://www.kancloud.cn/yunye/axios/234845
import axios from 'axios'; import {MessageBox} from 'element-ui'; var qs = function (obj) { var rs = []; Object.keys(obj).forEach((key) => { if (typeof(obj[key]) !== 'undefined') { rs.push(key +'='+encodeURIComponent(obj[key])); } }); return rs.join('&'); }; var Ajax = axios.create({ }); // 请求拦截 Ajax.interceptors.request.use(config => { if(config.method == 'get'){ config.params = {...config.params , ...config.data}; } else if (config.method == 'jsonp') { config.headers = { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json; charset=UTF-8', 'Access-Control-Allow-Origin': '*' }; config.method = 'get'; config.params = {...config.params , ...config.data}; } else { if (config.data) { let data = eval(config.data); console.log(data); config.data = qs(data); } } return config; }, function (error) { return Promise.reject(error); }); Ajax.interceptors.response.use(function(response) { var data = response.data || {}; if(data.status){ // 响应报错统一处理 MessageBox.alert(data.message, { confirmButtonText: '确定', showClose: false }); } return data; }, function (error) { return Promise.reject(error); }); Ajax.install = function(Vue) { console.log(Vue); Vue.prototype.$ajax = Ajax; }; export default Ajax;这里自定义了jsonp请求方法,进行跨域请求。
在代码中的请求方式是:this.rootApi = http://localhost:8888
this.$ajax({ url: this.rootApi + '/test', method: 'jsonp', data: { // 需要的参数, startDate: date, endDate: date } }).then(json => { //请求成功处理. }).catch(err => { console.log(err); });这里的请求就是get请求方式,
SpringBoot后端的请求方式:对于SpringBoot的跨域处理方式有三种吧,一种是全局指定请求方式进行跨域处理,一种是只当Controller 一类接口进行跨域处理,一种的具体某个方法进行跨域处理。我这里介绍的就是一类接口比较简单的跨域处理,就是在具体提供跨域服务的类上添加一个注解进行处理。如下:
@RestController @CrossOrigin(origins = {"http://127.0.0.1:9000", "null"}) public class CheckDataController {这里前端页面的ip加端口号是:http://127.0.0.1:9000,也可以是域名,正式环境都是域名的,
后端服务器地址:http://localhost:8888
