springboot +element-axios跨域请求
1、初始化element项目
1.1:vue init webpage '项目名称'
1.2:npm i element-ui -S
1.3:在main.js添加
- import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
2、添加axios跨域请求
在main.js中添加
- /**
- * 跨域设置
- * @type {AxiosStatic}
- */
- import axios from 'axios'
- Vue.prototype.$axios = axios
- Vue.config.productionTip = false
- axios.defaults.withCredentials = false//这个默认即为false,如果改为true,可以传递session信息,后端要做相应修改来放行,
3、创建页面
- <template>
- <el-button @click="post">发送请求</el-button>
- </template>
- <script>
- import axios from "axios";
- export default {
- data() {
- return {
- activeIndex2: '1'
- };
- },
- methods: {
- handleSelect(key, keyPath) {
- console.log(key, keyPath);
- },
- post(){
- axios.get('http://localhost:8080/test')
- .then(function (response) {
- console.log(response,"已经成功发送请求!");
- })
- .catch(function (error) {
- console.log("请求失败!");
- });
- }
- }
- }
- </script>
4、创建springboot项目
4.1添加一个controller类
- @Controller
- @CrossOrigin
- public class TestController {
- @RequestMapping("/test")
- @ResponseBody
- public JsonResponseExt Test(){
- System.out.println("在执行~~~~~~~~~");
- return JsonResponseExt.success("执行");
- }
- }
- JsonResponseExt是我自己封装的一个类,你们可以直接返回一个对象或者字符串也是可以的
另外,在controller类里要添加@CrossOrigin注解,否则前端返回结果会报错
你也可以自己封装一个配置类例如
- @Configuration
- public class CorsConfig extends WebMvcConfigurerAdapter {
- @Override
- public void addCorsMappings(CorsRegistry registry) {
- System.out.println("----------------------");
- registry.addMapping("/**")
- .allowedOrigins("*")
- .allowCredentials(true)
- .allowedMethods("GET", "POST", "DELETE", "PUT")
- .maxAge(3600);
- }
- }
5、测试结果
springboot +element-axios跨域请求的更多相关文章
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- vue 使用axios 跨域请求数据的问题
axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...
- vue-cli3.0+node.js+axios跨域请求session不一样的问题
一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...
- SpringBoot设置支持跨域请求
跨域:现代浏览器出全的考虑,在http/https请求时必须遵守同源策略,否则即使跨域的http/https 请求,默认情况下是被禁止的,ip(域名)不同.或者端口不同.协议不同(比如http.htt ...
- 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 ...
- axios 跨域请求允许带cookie,则服务器Access-Control-Allow-Origin应设置为具体域名,否则请求无法获得返回数据
1.通过允许跨域访问实现了跨域请求,但为了使每个请求带上session信息,我设置了withCredentials ,即: axios.defaults.withCredentials = true ...
- SpringBoot 中解决跨域请求
CORS 理解 同源策略是web浏览器实现的一个重要的安全概念,它防止JavaScript代码对不同的来源(例如,不同的域)发出请求,而不是它所服务的来源.虽然同源策略有效地防止来自不同来源的资源,但 ...
- SpringBoot支持AJAX跨域请求
利用注解的方式解决AJAX请求跨域问题 1.编写一个支持跨域请求的 Configuration - 第一种方式 - CorsConfig.java import org.springframework ...
- vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置
1. 开发环境跨域配置 在 vue.config.js 文件中: module.exports = { runtimeCompiler: true, publicPath: '/', // 设置打包文 ...
- vue axios跨域请求,apache服务器设置
问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...
随机推荐
- python 进程、线程、协程感悟
进程: 感觉只是使用Process模块加以使用即可: # -*- coding: utf-8 -*- # data:2019-02-23 21:23 # user:DIY # file:thread_ ...
- 935. Knight Dialer
A chess knight can move as indicated in the chess diagram below: . This time, we place o ...
- Greedy- 621. Task Scheduler
Given a char array representing tasks CPU need to do. It contains capital letters A to Z where diffe ...
- python操作mongodb实例
安装pymongo扩展 import pymongo; client = pymongo.MongoClient(host='10.48.176.170',port=27017); db = clie ...
- Ultra-QuickSort (POJ 2299)树状数组+离散化
题目链接 Description In this problem, you have to analyze a particular sorting algorithm. The algorithm ...
- nacicat premium 快捷键
1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗口的s ...
- 【8】JMicro微服务-JMicro ZKUI
ZKUI是一个开源项目,是一个查看,修改ZK数据非常方便的工具.JMicro基于ZK做服务治理,配置管理,因此使用ZKUI会提供非常大的方便. Github地址:https://github.com/ ...
- 剑指offer三十七之数字在排序数组中出现的次数
一.题目 统计一个数字在排序数组中出现的次数. 二.思路 解法一:遍历数组计数 解法二:考虑到时有序数组,所以采用分查找,找到第一个K 和 最后一个K的位置, 二者相减. 三.代码 解法一: publ ...
- PHP查找与搜索数组元素
in_array()函数 in_array()函数在一个数组汇总搜索一个特定值,如果找到这个值返回true,否则返回false.其形式如下: boolean in_array(mixed needle ...
- Zookeeper--0100--简介说明
1.1-Zookeeper简介 什么是Zookeeper? Zookeeper是一个高效的分布式协调服务,它暴露了一些公共服务,比如命名/配置/管理/同步控制/群组服务等.我们可以使用ZK来实现比如达 ...