1、首先项目中安装axios插件
2、手动配置,在src下面创建config文件夹,下面在创建index.js(访问域名配置)和axios.js(请求拦截以及轻轻配置等)
index.js
// 系统参数配置
let url = {
production: 'http://localhost:8083',
release: 'http://localhost:8081',
test: 'http://localhost:8080',
development: 'http://localhost:8083'
}
let baseURL
let env = process.env.NODE_ENV
switch (env) {
case 'production':
baseURL = url[env]
break
case 'release':
baseURL = url[env]
break
case 'test':
baseURL = url[env]
break
default:
baseURL = url[env]
}
export default {
url: url, // 接口地址
baseURL: baseURL, // 基础地址
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded'
},
// headers: {
// ContentType: 'application/x-www-form-urlencoded'
// },
timeout: 10000, // 请求超时
version: '1.3.0' // 应用版本
}
axios.js
import axios from 'axios'
import qs from 'qs'
import config from '@/config'
const {baseURL, timeout, headers} = config
axios.defaults.withCredentials = true
const ax = axios.create({
// 是否跨站点访问控制请求使用凭证(Cookie)
withCredentials: true,
baseURL: localStorage.getItem('newURL') || baseURL, // 配置接口地址
// 修改请求的数据再发送到服务器
transformRequest: [
(data, headers) => qs.stringify(data) // 序列化请求的数据
],
// 请求头信息
headers: headers,
timeout: timeout // 配置请求超时
})
// 添加请求拦截器(发送前拦截)
ax.interceptors.request.use(function (config) {
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加 axios 实例响应拦截器
ax.interceptors.response.use(response => {
return false
}, error => {
console.log(config)
})
页面访问Logon.Vue中
表单
<Form ref="login" :model="user" :rules="ruleInline" inline>
// 省略输入框
<Button type="primary" @click="handleSubmit('login')">登陆</Button>
</Form>
// 引入配置文件
import ax from '@/config/axios'
import config from '@/config/index'
//发送请求方式
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
// 配置默认接口地址
const {baseURL} = config
ax.post(baseURL + '/login', {
account: this.user.account,
password: this.user.password
}).then((response) => {
if (response.status === 200) {
// 登陆成功操作
}
}).catch(function (error) {
// 登陆失败操作
console.log(error)
})
} else {
console.log('error submit!!')
this.$Message.error('Fail!')
return false
}
}
}
}
3、后台需要设置跨域访问过滤器
package com.trgis.firstproject.framework.config;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 跨域设置
* @Zz
*/
@Component
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
httpServletResponse.setHeader("Access-Control-Allow-Origin",httpServletRequest.getHeader("Origin"));
httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
对访问进行封装:
src目录下新建services文件夹,在创建login.js
login.js
import ax from '@/config/axios'
import config from '@/config/index'
const {baseURL} = config
export const login = params => ax.post(baseURL + '/login', params) // 用户登录
在登陆页Login.vue中引用
// 引用login.js
import {
login
} from '@/services/login'
// 发送登陆请求改为
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
// 配置默认接口地址,封装参数发送,以下注释中的请求也可以(二选一)
/* const para = Object.assign({}, this.user)
setTimeout(() => {
login(para).then(res => {
}).catch(() => {
// 登陆失败操作
}, 500)
}) */
// 带参发送
setTimeout(() => {
login({
account: this.user.account,
password: this.user.password
}).then(res => {
}).catch(() => {
// 登陆失败操作
}, 500)
})
} else {
console.log('error submit!!')
return false
}
})
}