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去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...
随机推荐
- 【文文殿下】Win7打开无线热点
下载程序 : https://files.cnblogs.com/files/Syameimaru/wifi.rar 打开config.ini 修改相关信息,然后运行程序. 运行成功后,打开网络和共享 ...
- Codeforces450 B. Jzzhu and Sequences (找规律)
题目链接:https://vjudge.net/problem/CodeForces-450B Jzzhu has invented a kind of sequences, they meet th ...
- javaweb+spring 项目集成异常的处理
在web项目开发中,一个系统应该要考虑到异常情况的处理,并且应该当异常发生时应该需要记录相应的异常日志,对于用户而言则不能直接抛出异常,需要考虑到用户的体验: 以下就介绍基于spring框架的基础上的 ...
- Bind读取配置到C#实例
1.创建一个空的ASP.NET Core Web 应用程序 2.程序包管理控制台执行Install-Package Microsoft.AspNetCore -Version 2.0.1 3.创建js ...
- JMeter性能测试-服务器资源监控插件详解
零.引言 我们对被测应用进行性能测试时,除了关注吞吐量.响应时间等应用自身的表现外,对应用运行所涉及的服务器资源的使用情况,也是非常重要的方面,通过实时监控,可以准确的把握不同测试场景下服 ...
- jmeter报错
1.检测服务性能是报超时时问题 解决:因为服务器限制只能域名访问不能用ip+端口访问,但是jmter使用的是IP+端口访问 如图: 所以需要服务器放开这个端口,改成可以使用这个IP+端口访问
- Servlet中相对路径与绝对路径
相对路径与绝对路径: 相对路径:相对路径指的是相对于当前文件所在目录的路径! http://localhost:8080/servlet01/ http://localhost:8080/servle ...
- HTML+Javascript制作拼图小游戏详解(二)
上一篇我们说了网页的基本布局.接下来将为大家带来具体的实现方法. 拼图通表格来实现,做一个方形的表格,改变其大小使之如图所示. 试想一下如果我们将一张图片剪成6张分别放入对应位置,然后再把它打乱,这样 ...
- 深度学习笔记(六)VGG14
Very Deep Convolutional Networks for Large-Scale Image Recognition 1. 主要贡献 本文探究了参数总数基本不变的情况下,CNN随着层数 ...
- css实现响应式九宫格效果
1. 首先看下九宫格的效果图: 2. html代码比较简单,如下: <div class="main"> <div class="box1"& ...