引言

在前后端分离的开发模式下,前端Vue应用和后端SpringBoot服务往往部署在不同的域名下。由于浏览器的同源策略限制,这会导致跨域问题。本文将介绍如何在SpringBoot和Vue项目中一站式解决跨域问题。
跨域

什么是跨域问题?

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

SpringBoot中解决跨域的几种方案

方案一:使用@CrossOrigin注解

在SpringBoot中,可以使用@CrossOrigin注解来允许跨域请求。你可以将其添加到Controller类或具体的方法上。

@RestController
@ResponseBody
public class BasicController {

    // http://127.0.0.1:8080/user
    @RequestMapping("/user")
    @CrossOrigin("http://localhost:5173")
    public User user() {
        User user = new User();
        user.setName("张三");
        user.setAge(666);
        return user;
    }
}

使用@CrossOrigin注解后成功响应
在这里插入图片描述

方案二:全局CORS配置

通过实现WebMvcConfigurer接口并重写addCorsMappings方法,可以进行全局跨域配置。

package com.star.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 跨域配置
 *
 * @author WYH
 * @since 2024/5/5 下午3:03
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 允许跨域请求的路径
                .allowedOrigins("http://localhost:5173")    // 允许的域名
                .allowCredentials(true) // 允许携带认证信息(前后端保持一致)
                .maxAge(3600)   // 预检请求缓存时间,1小时
                .allowedHeaders("*")    // 允许的请求头
                .allowedMethods("GET", "POST", "PUT", "DELETE");   // 允许的方法
    }
}

成功响应
在这里插入图片描述

方案三:使用CorsFilter

创建一个配置类,使用CorsConfigurationUrlBasedCorsConfigurationSource来配置CORS,并返回CorsFilter对象。

package com.star.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 过滤器
 *
 * @author WYH
 * @since 2024/5/5 下午3:10
 */
@Configuration
public class CorsFilterConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);   // 允许携带认证信息
        config.addAllowedOrigin("http://localhost:5173");   // 允许的域名
        config.addAllowedHeader("*");   // 允许所有请求头
        config.addAllowedMethod("*");   // 允许所有请求方法
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

成功响应
在这里插入图片描述

Vue中解决跨域的注意事项

在Vue项目中,通常不需要特别处理跨域问题,因为跨域问题主要发生在浏览器端。但若后端服务部署在服务器上,而开发环境的Vue应用运行在本地,可以通过以下方式解决:

  1. 开发服务器代理:在Vue2项目中,可以使用vue.config.js文件配置开发服务器的代理。

注意:该方法仅适用于开发环境中使用,生产环境中可以配置nginx代理服务器来实现类似的功能

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

Vue3(vite构建)项目中,可以使用vite.config.js文件配置开发服务器的代理。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',    // 后端地址
                changeOrigin: true, // 允许跨域
                rewrite: path => path.replace(/^\/api/, '') // 路径重写
            }
        }
    }
})

  1. 生产环境部署:在生产环境中,确保Vue应用和后端服务之间的域名配置正确,以便后端服务可以正确处理跨域请求。

总结

跨域问题虽然常见,但通过SpringBoot提供的多种解决方案,结合Vue项目中的配置,可以轻松解决。在实际开发中,应根据项目需求和部署环境,选择最合适的跨域解决方案。同时,要注意在生产环境中合理配置CORS,以避免潜在的安全风险。

如果对你有帮助的话,不妨点个赞,点个关注再走吧!
接Java毕设、课设,提供远程调试指导,有需要的话+V了解
微信二维码

GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐