从看视频到上线部署花费的时间还是挺久的，拖的时间比较长，我就分享下上线遇到的坑与解决办法吧，我用宝塔上线部署的（个人觉得比较方便），哈哈

1.前端

修改运行build时的请求后端的地址：修改为后端在服务器的地址

然后执行npm run build进行打包，生成一个dist文件

将文件放入服务器

2.后端

编写prod的配置

修改数据库，redis为线上数据库

将项目打包放入服务器

指定端口和配置的代码

--server.port=8080 --spring.profiles.active=prod

3.前后端跨域问题

1.前端地址：http://localhost:3000

后端地址：http://localhost:8081/api

我自己测试实现方法：

方法一：

编写配置WebMvcConfigurer，我这里将所有的跨域请求都可以通过，我知道应该存在风险，但是这也是一种简单的方法。

@Configuration

public class WebMvcConfg implements WebMvcConfigurer {

@Override

public void addCorsMappings(CorsRegistry registry) {

//设置允许跨域的路径

registry.addMapping ("/**")

//设置允许跨域请求的域名

.allowedOriginPatterns ("*")

//是否允许证书

.allowCredentials (true)

//设置允许的方法

.allowedMethods ("*")

//设置允许的header属性

.allowedHeaders ("*")

//允许跨域时间

.maxAge (3600);

}

方法二：

写nginx配置，让服务器告诉浏览器：允许跨域

location ^~ /api/ {

proxy_pass http://域名或者服务器地址:8081/api/;

add_header 'Access-Control-Allow-Origin' $http_origin;

add_header 'Access-Control-Allow-Credentials' 'true';

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers '*';

if ($request_method = 'OPTIONS') {

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Origin' $http_origin;

add_header 'Access-Control-Allow-Methods' 'GET, POST,

OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,XRequested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

add_header 'Access-Control-Max-Age' 1728000;

add_header 'Content-Type' 'text/plain; charset=utf-8';

add_header 'Content-Length' 0;

return 204;

}

方法三：添加注解（在本地测试可以，但是上线我失败了，有伙伴成功了告诉我怎么搞）

在controller添加@CrossOrigin注解

@CrossOrigin注解

origins：允许可访问的域列表，将前端地址放入

@CrossOrigin(origins = {"http://localhost:3000"},allowCredentials = "true")

如果这个方法失败了，可以用全局配置类解决，上述方法一。

好了，基本就是这些东西了，总结我想这几天把用户中心和伙伴匹配一起总结下。

伙伴匹配总结的全部评论