springboot+vue前后端分离跨域问题配置

本文介绍了一个简单的跨域问题解决方案,通过实现自定义的过滤器来设置HTTP响应头,允许特定来源进行跨域请求,适用于多种HTTP方法。

只需要增加一个配置类即可 

/**
 * 解决跨域问题
 * @author kangzhuang
 * @date 2020/11/20
 */
@Component
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest)servletRequest;

        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", origin);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        String method = request.getMethod();
        if(method.equalsIgnoreCase("OPTIONS")){
            servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
        }else{
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }

    @Override
    public void destroy() {

    }

}

 

### 配置 VSCode 中 SpringBoot 后端和 Vue 前端的开发环境 在 VSCode 中配置 SpringBoot 后端和 Vue 前端的开发环境,实现前后端分离架构,需要分别完成以下任务:安装必要的工具和插件、配置后端开发环境、配置前端开发环境以及确保前后端能够通过 API 正常通信。 #### 1. 安装必要的工具和插件 - **安装 Node.js 和 npm**:Vue 前端项目依赖于 Node.js 环境。可以通过官方地址下载并安装最新版本的 Node.js[^2]。 - **安装 Java Development Kit (JDK)**:SpringBoot 是基于 Java 的框架,因此需要安装 JDK 8 或更高版本[^1]。 - **安装 Maven**:用于构建和管理 SpringBoot 项目。可以通过命令 `mvn -v` 检查是否已正确安装[^1]。 - **VSCode 插件**: - **Java Extension Pack**:支持 Java 开发。 - **Vue Language Features (Volar)**:提供 Vue 文件语法高亮和支持。 - **REST Client**:测试前后端接口通信。 #### 2. 配置 SpringBoot 后端开发环境 - **创建 SpringBoot 项目**: - 使用 [Spring Initializr](https://start.spring.io/) 创建一个新的 SpringBoot 项目,选择所需的依赖项(如 `Spring Web`, `Spring Data JPA`, `MySQL Driver` 等)[^1]。 - 将生成的项目解压后导入到 VSCode 中。 - **配置 application.properties 文件**: ```properties server.port=8080 spring.datasource.url=jdbc:mysql://localhost:3306/your_database spring.datasource.username=root spring.datasource.password=your_password spring.jpa.hibernate.ddl-auto=update ``` - **运行后端项目**: - 在 VSCode 中右键点击主类文件(如 `Application.java`),选择 `Run Java` 运行项目[^1]。 #### 3. 配置 Vue 前端开发环境 - **创建 Vue 项目**: - 使用 Vue CLI 创建新的 Vue 项目。打开终端,输入以下命令: ```bash npm install -g @vue/cli vue create frontend-project ``` - 根据提示选择默认配置或手动配置。 - **安装依赖**: - 进入项目目录并安装依赖: ```bash cd frontend-project npm install ``` - **运行前端项目**: - 使用以下命令启动 Vue 开发服务器: ```bash npm run serve ``` - 默认情况下,Vue 开发服务器会运行在 `http://localhost:8081`[^4]。 #### 4. 实现前后端通信 - **配置 CORS**: - 在 SpringBoot 后端中允许请求。可以在主类中添加以下代码: ```java @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8081") .allowedMethods("GET", "POST", "PUT", "DELETE"); } }; } ``` - **API 调用**: - 在 Vue 前端中使用 Axios 库与后端通信。首先安装 Axios: ```bash npm install axios ``` - 在组件中调用后端接口: ```javascript import axios from 'axios'; export default { methods: { fetchData() { axios.get('http://localhost:8080/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); } } }; ``` ### 注意事项 - 确保后端和前端的端口号不冲突,例如后端使用 `8080`,前端使用 `8081`[^4]。 - 如果需要部署项目,可以将前端打包后的文件放入后端的 `resources/static` 目录中[^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值