vue axios 跨域访问配置

本文详细介绍了如何配置前端axios进行跨域请求,并在后端实现相应的跨域过滤器,确保前后端交互正常,同时提供了请求示例及错误处理策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端配置:

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", "*");),如:

### 解决 Vue 中使用 Axios 请求的方法 在开发基于 Vue 的前端应用时,当通过 Axios 请求其他名下的 API 接口时会遇到浏览器同源策略限制所引发的问题。为了有效处理这一情况,可以采取如下几种方式: #### 一、服务器端设置 CORS 头部 最根本的做法是在目标服务器上配置允许来自特定或任意来源(即客户端)发出的 HTTP 请求。这通常涉及到修改 Web 应用程序所在的服务器响应头中的 `Access-Control-Allow-Origin` 字段[^1]。 #### 二、代理转发 对于本地开发环境而言,在项目根目录下创建或者编辑现有的 `vue.config.js` 文件,并添加代理规则来实现反向代理功能。这种方式能够使得所有的 `/api/*` 开始路径都被重定向到指定的目标 URL 上去,从而绕过了直接访问外部资源造成的障碍[^2]。 ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://example.com', // 目标API的基础URL changeOrigin: true, pathRewrite: {'^/api' : ''} } } } } ``` #### 三、利用插件简化操作 如果不想频繁地手动引入 Axios 实例,则可以通过安装并注册全局组件的方式让整个应用程序都可以方便快捷地调用 `$http` 或者自定义名称的服务对象来进行网络通信。例如,在 Vue CLI 创建的应用里可通过安装 `vue-axios` 插件完成此目的;而在 Vite 构建工具环境下则有专门针对 Vue3 版本设计好的解决方案可供选择[^3]。 ```bash npm install axios vue-axios --save ``` ```javascript import { createApp } from 'vue'; import App from './App.vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; const app = createApp(App); app.use(VueAxios, axios).mount('#app'); ``` 之后便可以在任何组件内部轻松发起带有默认配置项的异步请求了: ```javascript this.$axios.post('/api/login') .then(response => { console.log('登录成功:', response.data); }) .catch(error => { console.error('发生错误:', error); }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值