Vuejs中设置代理进行跨域的方法
在vue工程中根目录增加一个配置文件:vue.config.jsmodule.exports = {// 修改的配置devServer: {host:"0.0.0.0",disableHostCheck: true,//https: true,proxy: {"/api/":...
·
在vue工程中根目录增加一个配置文件:vue.config.js
module.exports = {
// 修改的配置
devServer: {
host:"0.0.0.0",
disableHostCheck: true,
// https: true,
proxy: {
"/api/": {
"target": "http://localhost:8090/",
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '/'
}
},"/rest/": {
"target": "http://localhost:8000/",
changeOrigin: true,
ws: true,
pathRewrite: {
'^/rest': '/'
}
}
}
}
}
安装axios
cnpm install axios --save-dev
在main.js中引入axios
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
Vue.use(axios);
Vue.config.productionTip = false
Vue.prototype.$axios = axios;
new Vue({
router,
render: h => h(App)
}).$mount('#app')
在业务代码中增加一个方法和一个按钮
methods: {
getData() {
window.console.info(1111111);
// 1:可以访问后端接口已经做了跨域设置的接口this.$axios.get("http://localhost:8090/hello").then((data)=>window.console.info(data))
//2:可以直接调用使用Vue做了代理的接口
// this.$axios.get("/api/hello").then((data)=>window.console.info(data))
// this.$axios.get("/rest/user/").then((data)=>window.console.info(data))
this.$axios
.get("http://localhost:8090/hello")
.then(data => window.console.info(data));
}
}
按钮触发事件
<button @click="getData()">请求接口</button>
获取如下内容并打印出来。
如果不想使用代理,则可以在后端接口做跨域支持:
springboot中在主类加入如下两个方法:
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 2允许任何头
corsConfiguration.addAllowedMethod("*"); // 3允许任何方法(post、get等)
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
后端跨域之后,前端也不用再设置代理访问了。
更多推荐
已为社区贡献5条内容
所有评论(0)