一、前端
1. 不需要配置 proxyTable
config/index.js 这个文件下的 proxyTable 不需要改写,不需要做跨域处理 (配置了也可以,不影响跨域)
2. 前端请求调用后端接口
axiosGet() {
this.$axios.get('/api/city/1').then((response) => {
console.log(response)
this.city = response.data
})
}
'/api/city/1' 为 请求地址, /api 会在 nginx 配置文件里 做转发,
前端所有请求都使用相对地址,假设都以“/api”开头,说明一下“/api”并不是接口URL中真实存在,只是为了统一代理才加上的,
然后在 nginx/conf/nginx.conf 文件下的 server模块中添加配置
3. 需要将 vue 项目 npm run build 编译生成的 dist 文件夹 放置于 nginx html文件夹下
路径 : /usr/local/nginx/html/
二、nginx 配置
location / {
root html/dist; # 前端项目放置的目录
index index.html index.htm;
try_files $uri $uri/ @router; #
}
location /api/ {
rewrite ^/api/(.*) /$1 break; # 做 统一代理
proxy_pass http://172.16.50.106:8011; # 后端服务 ip、端口
}
nginx 配置 修改部分如上,其他的按照初始的来
文件路径 /usr/local/nginx/conf/nginx.conf
三、 后端服务
后端服务 提供 调用接口
例如 : http://172.16.50.106:8011/city/1