解决Springboot+VUE项目部署出现的跨域问题

于储

已于 2023-11-02 11:18:02 修改

阅读量2.1k

点赞数 2

于 2023-08-04 19:27:30 首次发布

本文链接：https://blog.youkuaiyun.com/cheng5055251/article/details/132093912

版权

自己写了一个项目，写好了，发现不会部署，然后到处查资料，最终终于部署好自己写的系统，系统为前后端分离项目。需要分别部署在同一个服务器docker中，配置不同得端口隐射，部署得过程中主要是跨域问题，导致在前端部署得vue项目访问不了后端数据。下面先进行前端部署

1部署前端vue

1.1 开发环境下解决跨域问题

首先生产环境下解决跨域问题适用于开发环境，即在后端配置跨域问题可以解决！！
如果不配置后端的话，就配置下前端vue开发环境下解决跨域问题是用vue-cli作为代理解决的跨域问题，使用Webpack的开发服务器来进行代理配置，具体配置如下：
一·第一步

module.exports = {
  devServer: {
    proxy: {
       port: 8081,// vue运行端口号
       host: '0.0.0.0',
      '/api': {
        target: 'http://your-spring-boot-server:8080', // 后端Spring Boot项目地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

二·第二步

const http = axios.create({
        baseURL: '/api', // 以访问以api开头
        timeout: 10000,
    }
)

重启前端项目
注意：在生产环境中，为了解决跨域问题，你不能再使用Webpack的开发服务器来进行代理配置。代理配置只适用于开发环境。
Vue的代理配置是为了在开发环境中解决前后端分离开发时的跨域问题。当你在开发阶段使用npm run serve命令启动本地开发服务器时，Vue会根据vue.config.js中的代理配置，将特定请求代理到后端API服务，以解决跨域问题。这样，在开发阶段就可以顺利发起跨域请求，与后端API进行交互。但是，一旦将Vue项目打包部署到生产环境中，通过vue-cli-service build生成的静态资源文件会被部署在Web服务器中（例如Nginx、Apache等）。这时，Vue的代理配置将不再生效，因为所有的前端请求都会直接发送到部署的Web服务器，而不再通过vue.config.js中的代理配置。

1.2 生产环境下解决跨域问题

下面提供两种方法，任选其一即可
1.在Spring Boot应用的Controller类上添加**@CrossOrigin**注解：
注意：

springMVC的版本要在4.2或以上版本才支持@CrossOrigin
非@CrossOrigin没有解决跨域请求问题，而是不正确的请求导致无法得到预期的响应，导致浏览器端提示跨域问题。
在Controller注解上方添加@CrossOrigin注解后，仍然出现跨域问题，解决方案之一就是：在@RequestMapping注解中没有指定Get、Post方式，具体指定后，问题解决。其中@CrossOrigin中的2个参数：origins ：允许可访问的域列表
maxAge：准备响应前的缓存持续的最大时间（以秒为单位）。可以配置在Controller上也可以配置在方法上。

2.在Spring Boot中，你可以使用Spring Web提供的CORS支持来解决跨域问题。Spring Boot提供了配置选项来设置允许访问的域名、请求方法、请求头等。
在你的Spring Boot项目中，你需要添加一个CORS配置类来设置CORS头。


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 CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 需要配置跨域的接口路径，可以使用通配符
            .allowedOrigins("http://ip地址:端口") // 允许访问的域名，可以使用通配符，如：*表示允许所有域名
            .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
            .allowedHeaders("Content-Type") // 允许的请求头
            .allowCredentials(true); // 允许携带凭证，例如：cookies
    }
}

注意：配置类文件一定要写在启动类所在的包下，否则不生效。可以新建一个config包，在里面创建配置文件
在上面的示例中，我们创建了一个CorsConfig类，并实现了WebMvcConfigurer接口，然后在addCorsMappings方法中设置了CORS头。

“registry.addMapping(“/admin/**”)”：这里可以设置需要进行CORS配置的接口路径，/**通配符表示匹配所有路径，也可以根据实际情况设置具体的路径。
allowedOrigins(“http://localhost:8081”)：这里设置允许访问的域名，可以使用通配符*表示允许所有域名。
allowedOrigins(“http://localhost:8081”)：这里设置允许访问的域名，可以使用通配符*表示允许所有域名。
allowedHeaders(“Content-Type”)：设置允许的请求头，这里只允许Content-Type头。
allowCredentials(true)：设置允许携带凭证，例如：cookies。
注意：在生产环境中，不要使用通配符 * 来允许所有域名访问API，这是不安全的做法。应该根据具体情况设置允许访问的域名。
然后需要在创建axios实例或者使用axios时设置baseURL进行配置后端请求地址即可

注意：这样配置完后前端不用配置vue.config.js文件了，vue.config.js配置的跨域代理只在生产环境下有效

// 创建一个 axios 实例
const http = axios.create({
        baseURL: 'http://你的ip:端口号/admin', 
        timeout: 10000,
    }
)