前端配置:
api.url.js:
export default {
DOMAIN: 'http://localhost:8088',
baseURL: 'http://localhost:8088/fxtgpt/service',
/* Util API */
util: {
image: '/util/image.html', // 图片上传
},
};
index.js:
import axios from 'axios'; // 引入axios
import qs from 'qs'; // 引入qs
import APIUrl from './api.url'; // 引入api.url.js
// axios 默认配置 更多配置查看Axios中文文档
axios.defaults.timeout = 90000; // 超时默认值
axios.defaults.baseURL = APIUrl.baseURL; // 默认baseURL
// axios.defaults.responseType = 'json' // 默认数据响应类型
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true; // 表示跨域请求时是否需要使用凭证
// http request 拦截器
// 在ajax发送之前拦截 比如对所有请求统一添加header token
axios.interceptors.request.use(
config => {
/* if (token) {
config.headers.Authorization = `token123`;
} */
//config.headers.common['Access-Control-Allow-Origin'] = '*'
return config;
},
err => {
return Promise.reject(err);
}
);
// http response 拦截器
// ajax请求回调之前拦截 对请求返回的信息做统一处理 比如error为401无权限则跳转到登陆界面
axios.interceptors.response.use(
response => {
switch (response.data.error) {
case 401:
response.data.msg = '未授权,请登录';
break;
default:
break;
}
return response;
},
error => {
console.log(error);
return Promise.reject(error);
}
);
export default axios; // 这句千万不能漏下!!!
/**
* post 方法封装
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(data))
.then(response => {
resolve(response.data);
}, err => {
reject(err);
});
});
}
/**
* get 方法封装
* @param url
* @param data
* @returns {Promise}
*/
export function get(url, data = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: data
})
.then(response => {
resolve(response.data);
}, err => {
reject(err);
});
});
}
调用:
<template>
<div>
<ul>
<li v-for="(item,index) in projectList" :key="index">
{{item.vcProName}}
</li>
</ul>
</div>
</template>
<script>
import * as axios from '@/axios/index'; // 这里这里
export default {
name: 'project',
data() {
return {
projectList: [{
vcProName: '测试项目1'
}, {
vcProName: '测试项目2'
}]
};
},
methods: {
query() {
axios.get('/projects')
.then(this.handleRes)
},
handleRes(res) {
console.log(res);
this.projectList = res.data.objList;
}
},
mounted() {
this.query()
}
}
</script>
<style>
</style>
后端配置,添加一个过滤器:
public void doFilter(ServletRequest servletRequest,ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
String sessionId = "XmlBeanDefinitionReaderSid";
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
String origin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,OPTIONS,DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials", "true");
String method = request.getMethod();
if(method.equalsIgnoreCase("OPTIONS")){
servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
} else{
filterChain.doFilter(new HttpServletRequestWrapper(sid, request),servletResponse);
}
}
请求效果:
备注:
前端 axios 一定要设置:
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;
后端过滤器设置:response.setHeader("Access-Control-Allow-Origin", origin);时,一定要用origin。同时代码其他地方不要再重设该值(response.setHeader("Access-Control-Allow-Origin", "*");),如: