解决Springboot+vue前后端分离的跨域问题

本文介绍了三种解决SpringBoot+Vue前后端分离中跨域问题的方法:使用@CrossOrigin注解、通过nginx反向代理以及在SpringBoot中设置CORS跨域配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.@CrossOrigin注解

springmvc提供了@CrossOrigin注解在controller层加上注解@CrossOrigin注解进行前后端的跨域问题的解决,代码如下:

    @CrossOrigin
    @PostMapping("/findAll2")
    public Map findAll2(){
        Map map=new HashMap();
        List<Studentinfo> studentinfos = studentinfoMapper.selectList(null);
        map.put("code",0);
        map.put("msg","");
        map.put("count",0);
        map.put("data",studentinfos);
        return map;
    }

2.nginx (engine x)反向代理

需要下载安装nginx软件,打开nginx目录下conf目录里面nginx.conf文件,配置文件内容,可以配置客户端跨域或服务端跨域,两种方式解决跨域问题,具体配置百度。

3.springboot设置cors跨域

CORS(Cross-origin resource sharing-跨源资源共享)允许网页从其他域向浏览器请求额外的资源,例如字体,CSS或来自CDN的静态图像。 CORS有助于将来自多个域的网页内容提供给通常具有相同安全策略的浏览器。

 //这里实不实现接口没有影响
    @Configuration
    public class WebConfig implements WebMvcConfigurer {
  
### 构建 GitHub 上的 Spring Boot 和 Vue.js 前后端分离 Demo 项目 #### 一、项目结构概述 构建一个基于 Spring Boot 和 Vue.js 的前后端分离项目意味着创建两个独立的应用程序:一个是用于处理业务逻辑和服务接口的后端应用程序;另一个是负责用户界面展示的前端应用程序。这两个部分通过 RESTful API 或 GraphQL 进行通信。 对于后端而言,采用 Spring Boot 可以快速搭建起稳定的服务框架,并且能够方便地集成各种中间件和技术栈来实现复杂的企业级应用功能[^2]。而前端则可以借助于 Vue CLI 创建现代化单页应用(SPA),它提供了丰富的组件库和支持热重载等功能特性,极大地提高了开发效率[^1]。 #### 二、具体实施步骤说明 ##### 后端 (Spring Boot) - **初始化项目** 启动一个新的 Maven/Gradle 工程并引入必要的依赖项,比如 spring-boot-starter-web 来支持 Web 开发。 ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> ``` - **定义 RestController** 编写控制器类暴露对外服务接口: ```java @RestController @RequestMapping("/api") public class UserController { @GetMapping("/hello/{name}") public String sayHello(@PathVariable String name){ return "Hello, "+name; } } ``` ##### 前端 (Vue.js) - **安装 Vue CLI 并新建工程** 执行命令 `npm install -g @vue/cli` 安装全局工具链之后再运行 `vue create my-project` 创建新项目。 - **调整 HomeView.vue 文件内容** 按照需求自定义视图模板,在此案例中修改 views 下面的 HomeView.vue 如下所示[^4]: ```html <!-- templates --> <template> <div class="home"> {{ username }} 登录成功 </div> </template> <script> export default { data() { return {}; }, created(){ this.username = this.$route.query.username || 'Guest'; // 如果有用户名参数,则显示该用户的名称;否则默认为 Guest 用户名 } }; </script> <style scoped></style> ``` - **配置代理解决问题** 为了使前端可以直接请求到本地服务器上的API而不受同源策略限制,可以在 vue.config.js 中设置 devServer.proxy 属性指向后台地址: ```javascript module.exports={ devServer:{ proxy:'http://localhost:8080' } } ``` #### 三、部署与测试 完成上述操作后分别编译打包前后两端代码至各自的目标目录内,最后将它们部署在同一台机器上或者不同主机间但需确保网络可达性良好以便正常访问资源。此时打开浏览器输入 http://localhost:8080/#/?username=YourName 即可看到页面显示出 “YourName登录成功”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值