1、初始化element项目
  1.1:vue init webpage '项目名称'

  1.2:npm i element-ui -S

  1.3:在main.js添加
  

  1. import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)

2、添加axios跨域请求

  在main.js中添加
  

  1. /**
  2.   * 跨域设置
  3.   * @type {AxiosStatic}
  4.   */
  5.   import axios from 'axios'
  6.   Vue.prototype.$axios = axios
  7.   Vue.config.productionTip = false
  8.   axios.defaults.withCredentials = false//这个默认即为false,如果改为true,可以传递session信息,后端要做相应修改来放行,

3、创建页面

  1. <template>
  2. <el-button @click="post">发送请求</el-button>
  3. </template>
  4.  
  5. <script>
  6. import axios from "axios";
  7. export default {
  8.  
  9. data() {
  10. return {
  11. activeIndex2: '1'
  12. };
  13. },
  14. methods: {
  15. handleSelect(key, keyPath) {
  16. console.log(key, keyPath);
  17. },
  18. post(){
  19. axios.get('http://localhost:8080/test')
  20. .then(function (response) {
  21. console.log(response,"已经成功发送请求!");
  22. })
  23. .catch(function (error) {
  24. console.log("请求失败!");
  25. });
  26. }
  27.  
  28. }
  29. }
  30. </script>

4、创建springboot项目

  4.1添加一个controller类

  1. @Controller
  2. @CrossOrigin
  3. public class TestController {
  4.  
  5. @RequestMapping("/test")
  6. @ResponseBody
  7. public JsonResponseExt Test(){
  8. System.out.println("在执行~~~~~~~~~");
  9. return JsonResponseExt.success("执行");
  10. }
  11.  
  12. }
  1. JsonResponseExt是我自己封装的一个类,你们可以直接返回一个对象或者字符串也是可以的
    另外,在controller类里要添加@CrossOrigin注解,否则前端返回结果会报错

   你也可以自己封装一个配置类例如

  1. @Configuration
  2. public class CorsConfig extends WebMvcConfigurerAdapter {
  3.  
  4. @Override
  5. public void addCorsMappings(CorsRegistry registry) {
  6. System.out.println("----------------------");
  7. registry.addMapping("/**")
  8. .allowedOrigins("*")
  9. .allowCredentials(true)
  10. .allowedMethods("GET", "POST", "DELETE", "PUT")
  11. .maxAge(3600);
  12. }
  13.  
  14. }

5、测试结果

  1.  

springboot +element-axios跨域请求的更多相关文章

  1. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  2. vue 使用axios 跨域请求数据的问题

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...

  3. vue-cli3.0+node.js+axios跨域请求session不一样的问题

    一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...

  4. SpringBoot设置支持跨域请求

    跨域:现代浏览器出全的考虑,在http/https请求时必须遵守同源策略,否则即使跨域的http/https 请求,默认情况下是被禁止的,ip(域名)不同.或者端口不同.协议不同(比如http.htt ...

  5. axios跨域请求报错:Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

    在做项目时,用到axios,数据用post提交时,老是报错,错误提示为: Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/add' fro ...

  6. axios 跨域请求允许带cookie,则服务器Access-Control-Allow-Origin应设置为具体域名,否则请求无法获得返回数据

    1.通过允许跨域访问实现了跨域请求,但为了使每个请求带上session信息,我设置了withCredentials ,即: axios.defaults.withCredentials = true ...

  7. SpringBoot 中解决跨域请求

    CORS 理解 同源策略是web浏览器实现的一个重要的安全概念,它防止JavaScript代码对不同的来源(例如,不同的域)发出请求,而不是它所服务的来源.虽然同源策略有效地防止来自不同来源的资源,但 ...

  8. SpringBoot支持AJAX跨域请求

    利用注解的方式解决AJAX请求跨域问题 1.编写一个支持跨域请求的 Configuration - 第一种方式 - CorsConfig.java import org.springframework ...

  9. vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置

    1. 开发环境跨域配置 在 vue.config.js 文件中: module.exports = { runtimeCompiler: true, publicPath: '/', // 设置打包文 ...

  10. vue axios跨域请求,apache服务器设置

    问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...

随机推荐

  1. python 进程、线程、协程感悟

    进程: 感觉只是使用Process模块加以使用即可: # -*- coding: utf-8 -*- # data:2019-02-23 21:23 # user:DIY # file:thread_ ...

  2. 935. Knight Dialer

    A chess knight can move as indicated in the chess diagram below:  .            This time, we place o ...

  3. Greedy- 621. Task Scheduler

    Given a char array representing tasks CPU need to do. It contains capital letters A to Z where diffe ...

  4. python操作mongodb实例

    安装pymongo扩展 import pymongo; client = pymongo.MongoClient(host='10.48.176.170',port=27017); db = clie ...

  5. Ultra-QuickSort (POJ 2299)树状数组+离散化

    题目链接 Description In this problem, you have to analyze a particular sorting algorithm. The algorithm ...

  6. nacicat premium 快捷键

    1.ctrl+q          打开查询窗口 2.ctrl+/           注释sql语句 3.ctrl+shift +/  解除注释 4.ctrl+r          运行查询窗口的s ...

  7. 【8】JMicro微服务-JMicro ZKUI

    ZKUI是一个开源项目,是一个查看,修改ZK数据非常方便的工具.JMicro基于ZK做服务治理,配置管理,因此使用ZKUI会提供非常大的方便. Github地址:https://github.com/ ...

  8. 剑指offer三十七之数字在排序数组中出现的次数

    一.题目 统计一个数字在排序数组中出现的次数. 二.思路 解法一:遍历数组计数 解法二:考虑到时有序数组,所以采用分查找,找到第一个K 和 最后一个K的位置, 二者相减. 三.代码 解法一: publ ...

  9. PHP查找与搜索数组元素

    in_array()函数 in_array()函数在一个数组汇总搜索一个特定值,如果找到这个值返回true,否则返回false.其形式如下: boolean in_array(mixed needle ...

  10. Zookeeper--0100--简介说明

    1.1-Zookeeper简介 什么是Zookeeper? Zookeeper是一个高效的分布式协调服务,它暴露了一些公共服务,比如命名/配置/管理/同步控制/群组服务等.我们可以使用ZK来实现比如达 ...