Vuejs中设置代理进行跨域的方法

在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); }

后端跨域之后，前端也不用再设置代理访问了。