Vue实现axios手动配置跨域访问以及对访问进行封装

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
        }
      })
    }