Vue设置

1、在项目根目录创建文件vue.config.js

module.exports = {devServer: {proxy: {'/api': {target: 'http://zlf.plus', //对应自己的接口changeOrigin: true,ws: true,pathRewrite: {'^/api': ''}}}}}

2、在main.js中配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.config.productionTip = falseVue.prototype.$axios = axios
//配置跨域的 `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
axios.defaults.baseURL = '/api'  //关键代码Vue.use(ElementUI);
new Vue({router,render: h => h(App)
}).$mount('#app')

或者使用后端跨域

springBoot配置

1、局部跨域

@RestController
public class TestController {/***  @CrossOrigin 跨域*      value：请求的来源的域*      maxAge：表示探测请求的有效期*      allowedHeaders：表示允许的请求头，*表示所有的请求头都被允许* @return*/@PostMapping("/get")@CrossOrigin(value = "http://localhost:8080",maxAge = 1800,allowedHeaders = "*")public Book getBook(){Book book = new Book();book.setId(100);book.setAuthor("吴承恩");book.setName("西游记");return book;}
}

2、全局配置

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedHeaders("*").allowedMethods("*").maxAge(1800).allowedOrigins("http://localhost:8080");}
}

#案例

<template><div><h1>主页</h1>{{data}}  </div>
</template><script>
export default {name:'home',data() {return {data:''}},created() {this.getPost();},methods: {getPost(){this.$axios.request({url:"http://localhost:9090/get", method: 'post'}).then((response)=>{console.log(response.data)this.data = response.data})}},
}
</script><style></style>

Vue + SpringBoot跨域相关推荐

[Vue.js]跨域访问四种解决方法
2019独角兽企业重金招聘Python工程师标准>>> 报错: has been blocked by CORS policy: Response to preflight requ ...
解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
如何实现vue前端跨域，proxyTable解决开发环境前端跨域问题
如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题参考文章: (1)如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题 (2)https://www.cnblog ...
springBoot跨域注解@CrossOrigin
Spring Framework 4.2 GA为CORS提供了第一类支持,使您比通常的基于过滤器的解决方案更容易和更强大地配置它.所以springMVC的版本要在4.2或以上版本才支持@CrossOr ...
Vue ajax跨域请求*
Vue ajax跨域请求 Vue webpack-dev-server实现跨域请求思路配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量 ...
vue项目跨域的问题（一个项目对接两个不同的域名、端口接口导致跨域,最好的办法是后端解决）
vue项目跨域的问题前端解决方法(一个项目对接两个不同的域名.端口接口导致跨域,最好的办法是后端解决) 前端解决方法: ①打开config文件---->index.js文件,找到 proxyTa ...
node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案先看后端的入口文 ...
uni-app vue axios跨域访问问题
uni-app vue axios跨域访问问题为了解决这个axios跨域访问报错问题,查了很多资料,最终还是解决了,特此在这里记录下方法. main.js import axios from 'st ...
Vue 前端跨域的解决方案（心得记录）
背景: 今天面试一面和二面都还ok,三面是两个小姐姐(工作性质应该是外包驻场,所以有甲方来面),简历上巴拉巴拉的简单聊了一下,到了关键了,小姐姐说问一下基础的东西(这也是最怕的,毕竟Vue我之前用的挺 ...

Vue + SpringBoot跨域

Vue设置

springBoot配置

Vue + SpringBoot跨域相关推荐

最新文章

热门文章