方法一:

一、创建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(还不会使用仅了解)

Logo

前往低代码交流专区

更多推荐