标签:for mod warnings 工作 url class 系统 style save
最近用vue-element-admin后台管理系统重构项目,用nginx做反向代理解决跨域问题并实现单点登陆,与后端同事研究了三天才搞定,主要是对nginx配置项不怎么理解,现在工作完成做个记录
1. 这里是nginx配置
server { listen 80; // nginx默认监听80端口 server_name usertag-local.vmic.xyz; # 这个是访问我本地前端项目配置的域名可随便写,需要在计算机的host文件中指定域名映射的端口127.0.0.1 usertag-local.vmic.xyz location / { proxy_pass http://localhost:8090; #这个配置用域名访问项目时会跳转到本地前端代码,与前端vue.config.js文件中的端口一致,也就是访问前端代码的地址 } location /api{ rewrite ^/api/(.*)$ /$1 break; proxy_set_header Host $http_host; #设置nginx的host,很重要,这个设置是将登陆之后后端获取要跳转的项目地址为当前项目域名 #proxy_set_header X-Forward-For $remote_addr; #设置客户端ip #proxy_set_header X-Real-IP 127.0.0.1; # 设置真实ip,后端获取需要 proxy_pass http://localhost:82; #所有/api开头的请求都会转发到这个地址 }
2.前端统一配置请求主机名
module.exports = { publicPath: ‘/‘, outputDir: ‘dist‘, assetsDir: ‘static‘, lintOnSave: process.env.NODE_ENV === ‘development‘, productionSourceMap: false, devServer: { port: 8090, open: true, host: ‘usertag-local.vmic.xyz‘, // 统一配置所有请求的主机名,这样在发axios请求时的url就只需要写接口名, overlay: { warnings: false, errors: true }
标签:for mod warnings 工作 url class 系统 style save
原文地址:https://www.cnblogs.com/ihuangqing/p/11116737.html