程序人生►WEB前端

Vue-Axios跨域请求

在vue.config.js中配置

注:首选我们得先创建一个vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
		devServer: {
		    open: true, //是否自动弹出浏览器页面
		    host: "localhost", 
		    port: '8081',
		    https: false,
		    hotOnly: false, 
		    // 配置代理实现跨域
            proxy: {
		        '/api': {
		            target: 'http://localhost:8080', //API服务器的地址
		            changeOrigin: true,
		            pathRewrite: {
		                '^/api': ''
		            }
		        }
		    },
            
		}
	}

请求实例:

这里用Springboot搭建了一个简易的接口:

image-20210206160358714

Vue 8081端口 实现跨域:

image-20210206160123890

image-20210206160147659

请求后:

image-20210206160157079

基本axios配置参数

1
2
3
4
5
6
7
8
9
10
axios配置参数:
	baseURL 配置的域名
	timeout:请求超时时长
	url:请求路径
	methods:请求方法  get/post/put/patch/delete
	params: 请求参数拼接在url上
	data:请求参数请求体中
	
优先级： axios请求配置 > axios实例配置 > axios全局配置 
	axios实例  axios.create() 返回的是一个promise对象

注意这个方式只能在开发环境中使用。!!!!

参考文章:https://blog.csdn.net/wh_xmy/article/details/87705840