下面的配置准备实现:
1 浏览器使用https 的443端口访问Nginx服务端;
2 使用安全证书;
3 统一前端的跨域为Nginx的443端口;
4 前端在调用后端api的时候Vue的axios增加api前缀,Nginx里在去掉;
5 Nginx优先过滤请求中包含/api/的接口,这正是Nginx代理的8001里的Java Spring Boot Web接口
前端Vue
1 代码中增加开发模式和生产模式的区分:
//生产环境会访问Nginx中的443/api,Nginx会去掉api;
//开发环境直接访问/路径,这个路径由下面的配置文件config/index.js代理到另一个8001的路径
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'https://10.60.32.61:443/api' : "/"
2 开发模式增加跨域代理:
前端Windows版本
dev: {
env: require('./dev.env'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { //代理,这个主要是因为开发模式是用Node提供的,用了代理以后,浏览器访问会来到这里转发到真正的后端接口
"/": {
target: 'http://10.60.32.61:8001', // 局域网测试机
secure: true, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
// ws: true,
pathRewrite: {
"^/": "/"
}
}
},
host: 'localhost', // 开发模式下浏览器IP地址
// host: '10.60.32.61', // 发布到局域网测试机
port: 8090, // 开发模式下浏览器端口号
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
部署Nginx Linux版本
server {
#默认80,现在改为前端Vue端口8090; 增加ssl证书配置
listen 443 ssl;
server_name ***lab.xxxxee.com;
ssl_certificate /usr/nginx-1.18.0/conf/cert/4399811_***lab.xxxxee.com.pem;
ssl_certificate_key /usr/nginx-1.18.0/conf/4399811_***lab.xxxxee.com.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #使用该协议进行配置。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #使用此加密套件。
ssl_prefer_server_ciphers on;
#charset koi8-r;
#access_log logs/host.access.log main;
#前端Vue对后端的请求会故意加上api子路径,从而到这里代理到后端服务接口
location /api/ {
#本机上运行的后台服务
proxy_pass http://139.224.30.89:8001/;
}
location / {
#这里的html是指Nginx自己的html文件夹,到时候把前端代码放到这里就可以了;这里的root是指Nginx的跟目录
root /usr/nginx-1.18.0/html;#这里使用了绝对路径
index index.html index.htm;
}