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