vue axios 跨域访问配置

前端配置：

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", "*");），如：