[教程]解锁Vue项目跨域请求难题：一站式解决方案详解

在前后端分离的开发模式下，Vue项目与后端服务（如SpringBoot）往往部署在不同的域名下。由于浏览器的同源策略限制，这会导致跨域问题。本文将详细介绍如何在Vue项目中解决跨域请求难题，提供一站式...

在前后端分离的开发模式下，Vue项目与后端服务（如SpringBoot）往往部署在不同的域名下。由于浏览器的同源策略限制，这会导致跨域问题。本文将详细介绍如何在Vue项目中解决跨域请求难题，提供一站式解决方案。

什么是跨域问题？

跨域问题（CORS，Cross-Origin Resource Sharing）是由于浏览器的同源策略导致的一种安全限制。当一个请求的域名、协议或端口与当前页面不一致时，就会触发跨域问题。这限制了前端代码对服务器资源的访问，从而保护用户数据安全。

Vue项目中解决跨域请求的方案

方案一：使用@CrossOrigin注解

在SpringBoot后端项目中，可以使用@CrossOrigin注解来允许跨域请求。以下是一个示例：

@RestController
@RequestMapping("/user")
@CrossOrigin("http://localhost:5173")
public class BasicController { @GetMapping 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;
@Configuration
public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:5173") .allowedMethods("GET", "POST", "PUT", "DELETE"); }
}

在上面的代码中，addCorsMappings方法配置了允许跨域请求的域名、HTTP方法和请求头。

方案三：使用代理服务器

在开发环境中，可以使用代理服务器来绕过跨域问题。以下是一个使用vue.config.js配置代理的示例：

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

在上面的代码中，所有以/api开头的请求都会被代理到http://localhost:8080。

总结

通过以上方案，可以有效地解决Vue项目中的跨域请求难题。在实际开发中，可以根据项目需求选择合适的方案。