前端配置

前端框架基于https://panjiachen.github.io/vue-admin-template二次开发, 是应用封装的Axios 的service

封装代码 src/utils/request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */
  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
export default service

在调用该方法时, 直接使用封装好的service (axios instance) 即可:

import service from '@/utils/request'
export default {
    test() {
        return service({ // Promise
              // 方位后台url,这里写死
            url:'http://localhost:8080/dev-api/getMockPersonInfo',
            method: 'post',
            //post提交的payload
            data: {
               "name": "王静飞",
            }
        })
    }
}

跨域无法访问

这里我们前端的url地址时: http://localhost:9530/
此时, 由于后端和前端的端口号不一样, 存在跨域无法访问状态.

修改后端

后端的对应 url:’http://localhost:8080/dev-api/getMockPersonInfo’的controller为

@Controller
//修改部分, 可以处理所有
@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping("/dev-api")
public class MockHandler {
    @Autowired
    PersonInfoService PIService;
    @ResponseBody
    @RequestMapping(value = "getMockPersonInfo")
    public RetBody getPersonInfo(PersonInfoVO PI, NeedPage needPage) {
        if (HttpHolder.needPage()) {
            PageHelper.startPage(needPage.getCurpage(), needPage.getPagesize(), HttpHolder.needPage());
        }
            List<PersonInfo> personList = PIService.getMapper().query(PI);
            return RetBody.gridData(personList);
    }
}

如果Spring版本为4.2+，则可以在Controller类或其方法上加@CrossOrigin注解，来使之支持跨域：

其中origins为@CrossOrigin的默认参数，即跨域来源，*表示任何来源，也可以是其它域名。比如如下形式：

@CrossOrigin(“http://localhost:4200“)
@CrossOrigin(origins={“http://localhost:4200“, “http://localhost:4242"})
@CrossOrigin(origins=”http://localhost:4200",maxAge=3600)

参考链接：https://blog.csdn.net/White_Idiot/article/details/80657796