SpringBoot + Vue 解决跨域问题

goalWJW

已于 2024-02-28 17:10:04 修改

阅读量1.7k

点赞数 4

于 2022-08-10 21:42:38 首次发布

本文链接：https://blog.csdn.net/weixin_48011779/article/details/126274866

版权

本文探讨了浏览器同源策略导致的跨域问题，并提供了两种解决方案：通过SpringBoot后端使用@CrossOrigin注解来允许跨域，以及在Vue前端配置代理实现请求的转发，避免修改后端代码。

摘要由CSDN通过智能技术生成

问题原因

浏览器不能访问协议/host/port 不同的其它域的服务器 , 要坚守同源策略保证安全性 ,
解决方案 : 1. 后端解决 / 2. 前端代理访问
在这里插入图片描述

方式一 : 后端解决

Vue前端项目中直接发送axios请求 , 请求真实接口

    selectAdmin() {
   
      axios.get('http://localhost:8080/selectAll').then(
          response => {
   
            this.tableData = response.data

          },
          error => {
   
            console.log(&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

goalWJW

关注关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
SpringBoot + Vue 解决跨域问题

Vue+SpringBoot解决跨域问题
复制链接

扫一扫

spring boot + vue 跨域解决

xu_jinhang的博客

06-18

406

一、第一种方法： 1.1、应许某个方法能跨域请求，可以在方法上加上注解 @CrossOrigin(origins = "http://localhost:4000") @CrossOrigin(origins = "*" , maxAge = 3600) 二、第二种方法在某个controller类上加入注解@CrossOrigin(origins = "*" , maxAge = 3600)，表示当前类中所有方法都可以跨域请求。三、第三种方法全局配置，改写请求头信息，实现跨域请求 i

SpringBoot+Vue：一站式解决跨域问题

05-05

1438

跨域问题（CORS，Cross-Origin Resource Sharing）是由于浏览器的同源策略导致的一种安全限制。当一个请求的域名、协议或端口与当前页面不一致时，就会触发跨域问题。

3 条评论您还未登录，请先登录后发表或查看评论

SpringBoot与Vue交互解决跨域问题【亲测已解决】，【最全总结】

2401_84138927的博客

04-10

1245

浏览器同源策略首先一个定义一定要了解，就是浏览器的同源策略，什么是浏览器的同源策略，简单来说就是浏览器发送请求的协议、域名和端口要和服务器接收请求的协议、域名以及端口一致。这样才能完成交互，但是很显然这样是不可能的，尤其在对于在同一台电脑上开发前后端分离的项目的时候，一定是会使用两个端口的。那么这样就形成了跨域问题。在这里分享一下我解决跨域问题用到的两个方法，一、VUE前端配置代理解决跨域。

SpringBoot+Vue解决跨域问题

cmsgu157的博客

07-08

763

在vue中解决跨域问题其实也比较简单，因为我们每次浏览器发送的请求中，URL的前半部分一定是相同的，比如http://localhost:8080/blogs与http://localhost:8080/login，我们就可以将他们相同的URL提取出来，封装到axios.defaults.baseURL中，这样我们在每次请求的时候，就可以将请求地址简写成“/blogs”这样，也相当于是将URL头部进行了一个简单的封装。在这里分别分享两种方法，分别在前端vue中解决和在后台springboot中解决。

Springboot+vue解决跨域问题

fuqiang133的博客

09-29

172

Springboot+vue解决跨域问题

SpringBoot+Vue项目跨域问题

weixin_39311781的博客

03-26

333

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时，那说明跨域了。

SpringBoot + vue 解决跨域问题

BeniLiy

04-08

2196

首先我是一个Java程序员，近来想写前端就自学了vue。关于前后端分离前端请求跨域问题记录下来，以供大家参考。先写了个后端接口非常简单的前端调用的测试接口： @GetMapping("/userLogin/{username}/{password}") public String login(@PathVariable("username") String username,...

SpringBoot+Vue-解决跨域问题

weixin_45723088的博客

05-12

1881

所谓跨域: 在前后端分离的项目中，前台一个服务，后台一个服务。前台的一个Axios请求打进来，要访问后台Tomcat服务器Restful接口浏览器出于安全的考虑，使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略在默认的情况下跨域是被禁止。 IP不同或者端口号不同就是跨域 HTML5带来了CORS协议解决跨域的问题 CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing），允许浏览器向跨源服务器，发出XMLH

springboot+vue解决跨域问题

i1103的博客

11-15

1071

一、什么是跨域在springboot+vue前后端分离项目中，请求资源的端口号，域名（ip地址）不同。二、跨域的解决方案 1、springboot后端处理：在每个controller上加上@CrossOrigin注解或在controller的基类上添加@CrossOrigin注解，其他controller类加上@Controller即可。 2、在vue前端进行处理：通过代理的方式访问后端接口。 ...

在Vue程序中，如何检测用户的登录状态并跳转到对应页面

exlink2012的专栏

07-25

376

通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。

vue单页面全屏使用 screenfull 实现全屏（左侧菜单栏隐藏）

m0_71835253的博客

07-25

488

vue单页面全屏使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客

VUE中的重点*

qq_61132537的博客

07-22

1086

实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data，所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。

通过不同方式在 Vue 3 中传递路由参数

点点滴滴

07-25

562

通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。

vue zip文件下载请求封装与使用

Anlittlecat的博客

07-23

413

Excel的话把type改成 { type: ‘application/vnd.ms-excel’ }这里把响应超时时间注释是文件下载接口返回需要较长时间。axios封装（重点是响应拦截）

vue网络请求

liu1shi的博客

07-23

290

【代码】vue网络请求。

vue+canvas音频可视化

最新发布

m0_56104994的博客

07-25

354

canvas制作音频可视化

Vue事件总线（EventBus）的概念、使用以及注意事项

weixin_53216033的博客

07-23

821

在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。

springboot+vue跨域

08-27

在使用Spring Boot和Vue开发前后端分离的项目中，解决跨域问题可以采用以下两种方法： 1. 在前端Vue中解决跨域问题：可以通过在Vue项目中配置代理来解决跨域。具体做法是在Vue项目的配置文件（一般是vue.config.js）中添加proxy配置，将需要跨域访问的后端接口地址映射到当前的开发环境，示例代码如下： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后端接口地址 changeOrigin: true, // 是否允许跨域 pathRewrite: { '^/api': '' // 路径重写，将请求路径中的'/api'去掉 } } } } } ``` 这样，在发送请求时，只需将路径前缀设置为'/api'即可，比如发送登录请求可以写成`this.$axios.post('/api/login')`。 2. 在后台Spring Boot中解决跨域问题：可以通过在Spring Boot项目中添加跨域配置来解决跨域。具体做法是在后台的配置类或配置文件中添加允许跨域请求的配置，示例代码如下： ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 允许所有请求跨域访问 .allowedOrigins("*") // 允许所有域名进行跨域访问 .allowedMethods("*") // 允许所有请求方法进行跨域访问 .allowedHeaders("*") // 允许所有请求头进行跨域访问 .allowCredentials(true); // 允许携带cookie进行跨域访问 } } ``` 这样，后台接收到前端的跨域请求时就会进行相应的处理，从而解决跨域问题。总结来说，解决Spring Boot和Vue跨域问题的方法有两种：在前端Vue中配置代理实现跨域，或在后台Spring Boot中添加跨域配置实现跨域。具体选择哪种方法取决于你的项目需求和开发习惯。123 #### 引用[.reference_title] - *1* *2* *3* [SpringBoot与Vue交互解决跨域问题【亲测已解决】](https://blog.csdn.net/weixin_44985880/article/details/120620207)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]