Spring Boot + Vue + Tomcat 跨域问题解决

最新推荐文章于 2024-04-17 17:03:35 发布
最新推荐文章于 2024-04-17 17:03:35 发布
阅读量2.3k 收藏 7
点赞数 1
文章标签： spring vue tomcat vue.js ajax跨域问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52767086/article/details/109902522
版权

SpringBoot + Vue + Tomcat 跨域问题解决

SpringBoot + Vue + Tomcat 项目

项目中，后端是jar打包方式的springboot，前端是tomcat+vue。不同的端口，有跨域问题。这里总结了项目中解决跨域问题的经验。

SpringBoot

虽然springboot有多种方式解决跨域问题，但由于springboot是采用了jar打包方式，这里就采用了@CrossOrigin注解的方式解决后端程序的跨域访问。

@RequestMapping("/api")
@RestController
public class UserController{
   
	@CrossOrigin(origins
最低0.47元/天 解锁文章
一个单纯的少年
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-cli3+Springboot解决跨域的问题
weixin_51043896的博客
08-11 471
在使用Vue+Springboot框架，前后端分离时，我们会遇到跨域的问题，也就是当你前端发送请求的时候，会报错： Access to XMLHttpRequest at ‘http://xxxx.com/xxx’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 当在网页的控制台...
vue脚手架+Tomcat（servlet）发生跨域问题如何解决？
weixin_42508683的博客
02-05 2164
vue脚手za架+Tomcat（servlet）发生跨域问题如何解决？
Vue项目部署到SpringBoot工程下
dongzhensong的博客
05-26 2万+
目录1.修改编译设置2. 编译3. 部署 首先, 从前后端分离的角度来说, 不建议将编译后的vue工程放到SpringBoot工程目录下,部署到Tomcat, 因为这有点违背前后端分离的设计. 建议将其部署到Nginx下. 即后端工程与前端工程分开部署. 1.修改编译设置 找到vue工程的 config/prod.env.js 文件(如果没有该文件可不处理), 修改 BASE_API 为正式环...
springboot+vue项目跨域问题的解决，后端解决
最新发布
m0_61684781的博客
04-17 106
【代码】springboot+vue项目跨域问题的解决，后端解决。
SpringBoot+Vue前后端分离跨域问题
Ssolitude123的博客
04-15 1129
什么是跨域问题 说到跨域，首先需要解释下为什么会出现这样的跨域问题。这其实都源于浏览器的同源策略。 同源策略是浏览器中的一个重要的安全策略，是Netscape公司在1995年引入。同源策略的作用就是为了限制不同源之间的交互，从而能够有效避免XSS、CSFR等浏览器层面的攻击。 同源指的是两个请求接口URL的协议(protocol)、域名(host)和端口(port)一致。 同源策略 比如以下例子： 同源与非同源接口 说到浏览器的攻击手段，XSS指的是恶意攻击者往Web页面里插入恶意HT
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
12-10
在用vue做前端开发的时候，因为一般跑vue使用的webpack自带的node服务，而我们实际要使用的数据确是后台服务器上的，所以这就涉及到服务器请求跨域的问题。本来在诸如axios之类的网络请求参数里面配置 withCredentials: true, 就可以解决跨域问题的，但是现在浏览器比如chorme有做了新的跨域限制，比如要服务器端配置允许跨域才行，详见跨域问题解决，是英文的，看起来需要花点功夫；那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢？答案肯定是有的！！ 这里就说chorme吧，因为chorme基本都是前端主流浏览器了，配置方法如下： 版本号49之前的跨域设置 具
Spring boot+vue3+element plus实现后台管理系统
07-04
前后端分离项目，Spring boot作为后端，vue框架实现前端，后端整合swagger3测试工具，jwt实现验证码生成，awt生成图形验证码，整合邮箱验证，使用mybatis-generator自动生成实体类以及mapper，设置有拦截器验证登录...
基于Spring Boot+Vue.js的后台管理系统源码.zip
05-01
基于Spring Boot+Vue.js的后台管理系统,权限管理，字典，配置，定时任务，短信，邮件，根据excel模板导出，cms内容管理，手机端h5。 基于Spring Boot+Vue.js的后台管理系统,权限管理，字典，配置，定时任务，短信，...
Spring Boot + Vue3 前后端分离 实战wiki知识库系统.zip
04-04
这项任务通常要求学生运用所学专业知识，通过独立研究和创新，完成一个实际问题的解决方案或者开展一项有价值的项目。 首先，毕业设计的选择通常由学生根据个人兴趣、专业方向以及实际需求来确定。学生需要在导师的...
基于spring boot + vue 的宿舍管理系统源码.zip
05-23
基于spring boot + vue 的宿舍管理系统源码，包含：前端、后端、数据库。
Tomcat配置解决跨域问题
12-24
亲证可用，真实有效，压缩包里有使用的具体说明，按照要求，绝对可以解决Tomcat的跨域问题
tomcat部署springboot+vue.doc
04-22
web项目是企业以及政府部门最常用的工具，政府门户网站，企业官网等基本都是web项目，web项目所使用的技术也是在不断的更新，前几年的技术基本上都是jsp+ssh，到后来的h5+ssh，h5+spring+mybatis，目前使用最多的是springboot+VUE前后端分离的技术，本文主要介绍了springboot+VUE怎么使用tomcat去部署
tomcat跨域访问
08-12
在开发vue时，使和vue-cli开发时，后台为tomcat,因此需要配置tomcat支持跨域请求，这样可以在vue 开发阶段调用后台接口。
spring boot项目和vue一起放在tomcat部署
11-13
spring boot项目和vue一起放在tomcat部署,spring boot项目和vue一起放在tomcat部署
Vue 项目中各种痛点问题及方案
前端达人
09-24 6555
作者：愣锤原文：https://juejin.im/post/6844903632815521799最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue...
Vue实现跨域请求
热门推荐
一棵不断成长的小白菜
09-13 6万+
实现跨域请求有两种方式： 1、fetch （1）在App.vue中使用created方法创建fetch，将域名及方法等创建，如下图 （2）在config配置文件中的index.js中的跨域区域中写入如下代码： （3）完善信息，将接口相应的需求补充完整 如下图所示，该测试接口有headers和body两个条件 因此，在App.vue中要补充这两个值，如下图 结果...
springboot vue 前后端分离项目部署到tomcat
sinat_34338162的博客
05-13 6582
1.在tomcat下新建一个base文件夹，用于存放vue build的文件 2.在项目运行“npm build，生成dist文件夹，dist文件夹中包含static和index.html 3.将上面的文件复制到tomcat下新建的base内 4.启动tomcat 5.本地port为8080， 输入http://localhost:8080/base/ ...
在Tomcat上部署Vue.js项目
小时的枫的博客
07-17 3万+
接着上次的图书管理系统 修改完问题后把SpringBoot成功部署到了服务器上 测试了下api接口，能正常访问 那么下面就是在服务器上部署前端的vue.js了 这里的话我们要明确一点 vue.js是一个前端的框架，所以部署的时候并不需要node.js之类的服务器 像本地的 1 npm run Dev 只是用来调试用
springboot vue Tomcat 发布
qq_33451880的博客
04-22 198
1.运行 npm run build 打包vue 项目生成dist文件夹 2.将文件夹中的文件放入springboot项目static文件夹下 3.将项目打包成war包放到Tomcat的webapps文件夹下启动Tomcat 遇到的问题 1.vue 项目 ...
Spring Boot+vue前后端分离项目如何跨域
05-18
在Spring Boot项目中，可以使用`CorsFilter`来解决跨域问题。以下是解决跨域的步骤： 1.在Spring Boot项目的配置类中，添加`CorsFilter`过滤器。 ```java @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); // 允许发送Cookie config.addAllowedOrigin("*"); // 允许任意域名 config.addAllowedHeader("*"); // 允许任意头信息 config.addAllowedMethod("*"); // 允许任意请求方法 source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } } ``` 2.在Vue项目中，可以使用`proxyTable`或`axios`来解决跨域问题。 - `proxyTable`方式 在`config/index.js`文件中，添加`proxyTable`配置。 ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:8080', // Spring Boot项目的地址 changeOrigin: true, pathRewrite: { '^/api': '/api' // 让/api对应到Spring Boot项目中的/api路径 } } } } } ``` - `axios`方式 在Vue项目的代码中，使用`axios`时设置`withCredentials`为`true`。 ```javascript import axios from 'axios' axios.defaults.withCredentials = true ``` 这样，在发送请求时，`axios`会将`Cookie`带过去，从而避免跨域问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值