前后端项目部署和解决跨域

一.前端项目部署

1.1 上传前端文件

站点创建好了，进入到站点的目录。

然后把它默认的文件删掉。

你会发现有个PHP项目删不掉，不用管它，那是它自己强制的一个设置。

然后直接把前端打包好的dist文件夹内的文件拖进去。

会弹出提示框，点击开始上传，全部上传成功就可以点击×，×掉它。

1.2 项目部署

添加站点，部署新项目。

1. 域名。域名中删除之前的服务器公网IP地址，域名如果没有泛解析，输入域名www.###.com，如果进行了泛解析，输入泛解析域名。

泛解析

2. 根目录。跟换为前端文件的根目录。

1.3 解决跨域

1.3.1 什么是跨域

什么是跨域？浏览器为了用户的安全，仅允许向同域名、同端口的服务器发送请求。

前端的域名和后端域名不一样，域名不一样就出现了跨域，跨域的话就报错了。

我们可以看一下网络请求。

为了防止跨域，或者说为了检测跨域，浏览器它会在发送正式请求之前，发送一个预检请求，预检的请求方法是OPTIONS。
预检请求经常用来检查是否跨域，或者换一句话说，当我们请求的域名是和当前网页域名不同的时候，它就会发送预检请求。

预检请求的作用：就是提前探路，比如说你要坐飞机，预检请求提前查一下你这个飞机航班有没有晚点，是不是正常运行的，如果不是正常运行的，那也不用发下一个请求了，或者说下一个请求直接拒绝掉。

1.3.2 配置文件

1. 在nginx配置跨域，点击设置。
2. 把之前配置的反向代理删除。
3. 在nginx配置文件的http->server->location中添加以下代码

location / {
try_files $uri $uri/ /index.html;
}

在前端的nginx中加入上面那个location配置。

二.后端项目部署

2.1 上传后端文件

在wwwroot目录下新建一个后端文件夹。

进入到这个目录中，把之前后端打包好的jar包，上传上去。

2.2 项目部署

添加JAVA项目，部署新项目。

1. 项目jar路径。更改为jar的文件路径。
2. 项目执行命令。
3. 然后先把tomcat停掉，不然用不了8080端口(装tomcat只是为了装java）。
4. 对上面的设置根据需要进行更改。
5. 去防火墙把8080端口放行。

只有项目执行命令正确，java项目才会运行。

2.3 解决跨域

1. 在nginx配置跨域，点击设置。
2. 把之前配置的反向代理删除。
3. 配置文件。

location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/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,X-Requested-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;
    }
}