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

自己写了一个项目,写好了,发现不会部署,然后到处查资料,最终终于部署好自己写的系统,系统为前后端分离项目。需要分别部署在同一个服务器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,
    }
)

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值