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

淩亂°似流年 2022-03-29 09:37 286阅读 0赞

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  注意：// 添加 axios 实例响应拦截器注释下的return false是要替换的，否则前台将接收不到后台数据

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

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