vue和springboot和ngnix跨域问题
跨域问题的基本概念
跨域问题是由浏览器的同源策略引起的，当前端Vue应用和后端SpringBoot应用部署在不同域名或端口时，浏览器会阻止跨域请求。Nginx作为反向代理服务器，可以协助解决这一问题。
Vue中的跨域配置
在Vue开发环境中，可以通过vue.config.js配置代理来解决跨域问题。以下是一个典型的配置示例：
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080', // SpringBoot后端地址changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}
开发环境下，Vue会将所有以/api开头的请求转发到SpringBoot后端，从而避免跨域问题。
SpringBoot中的跨域配置
SpringBoot后端可以通过注解或全局配置实现跨域支持。推荐使用全局配置的方式：
@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").maxAge(3600);}
}
这段代码允许所有来源的请求访问SpringBoot后端，支持常见的HTTP方法。生产环境中建议将allowedOrigins替换为具体的域名。
Nginx的跨域配置
Nginx可以通过添加响应头来支持跨域。以下是一个典型的Nginx配置片段：
server {listen 80;server_name yourdomain.com;location / {root /path/to/vue/dist;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://localhost:8080/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';}
}
Nginx将所有/api/开头的请求代理到SpringBoot后端，并添加必要的跨域头信息。生产环境中应将*替换为具体的Vue应用域名。
完整的解决方案
开发阶段使用Vue的代理配置解决跨域问题，生产环境则通过Nginx统一代理前后端请求。SpringBoot的跨域配置作为额外保障，确保即使不通过Nginx直接访问也能正常工作。
注意事项
跨域配置应遵循最小权限原则，生产环境中避免使用*通配符。对于涉及身份验证的请求，需要额外处理预检请求(OPTIONS)。如果使用HTTPS，所有相关配置也必须支持HTTPS。