解决axios跨域问题

方法一：

一、创建vue项目（vue init webpack projectName）

二、安装axios（npm insatll axios）

三、配置代理（config/index.js）：

在开发环境的代理列表proxyTable添加

'/api': {
        target: 'http://127.0.0.1:8888', //自己服务的ip和服务的端口
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'http://127.0.0.1:8888' //重写
        }
      }

配置axios的拦截文件config.js（src/api/config.js自己创建）

import axios from 'axios'


/**
 * axios 处理并发请求的助手函数
 */
axios.defaults.baseURL = '/api'

axios.interceptors.request.use(
  config => {
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
axios.interceptors.response.use(function (response) {
  //可以写判断获得的数据返回码
  return response
}, function (error) {
  return Promise.reject(error)
})
// 请求超时时间
axios.defaults.timeout = 60000

export default axios

四、编写获取数据api（src/api/WasteBookAPI.js）

import ajax from './config'


const getAllWithdrawList = function () {
  return new Promise((resove,reject) =>{
    ajax.get('/wastebook/getAllWithdrawList').then(response =>{
      resove(response.data.data)
    }).catch(desc =>{
      reject(desc.data.data)
    })
  })
}

export default {
  getAllWithdrawList
}

五、编写显示页面（调用WasteBookAPI.js内的getAllWithdrawList方法）

六、测试：

方法二：

Spring Boot项目直接使用注解@CrossOrigin，只能给单个controller解决问题，每个controller类都需要添加才行。

方法三：

在服务项目内添加配置文件

/**
 * 实现基本的跨域请求
 * @author hxb
 *
 */
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

方法四：

Jsonp（还不会使用仅了解）