nginx 代理

最近用vue-element-admin后台管理系统重构项目，用nginx做反向代理解决跨域问题并实现单点登陆，与后端同事研究了三天才完成，主要是对nginx配置项不怎么理解，现在工作完成做个记录

1. 准备工作：启动前端服务器，启动nginx,启动本地后端代码服务器

2. 浏览器访问域名 usertag-local.vmic.xyz，会通过nginx代转发到 http://localhost:8090，但地址栏仍然会显示域名而不是具体的ip，会进入前端首页面，

首页路由尽量用index表示，首页挂载函数mouted()时请求获取用户信息接口，该接口的完整url是 http://usertag-local.vmic.xyz/api/get/user,会通过nginx进行转发到 

http://localhost:82请求数据，每次的请求都会优先通过SSO去检查是否含有token,若没有则返回未登陆信息和重定向地址，该地址会在单点登陆地址的后面追加前端项目地址，

前端根据返回的信息进行判断并重定向到单点登录页面进行用户信息登陆，点击登陆成功之后SSO会重定向到前端项目地址并在URL上追加用户token，页面挂载时会从url上

获取token存到cookie中，并再次请求用户信息接口在信息头Cookie中会携带token和seesionID（登陆成功之后由SSO写入cookie），在经过SSO检查时用前端传入的token

和用户ip去查询用户信息若查到则登陆成功返回用户信息，若没有则返回未登陆信息和重定向地址。

 

 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开头的请求都会转发到这个地址，这是我本地后端代码地址，服务器端口是82
        }

 

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
    }
发送axios请求时将withCredentials=true,会自动将cookie中的信息携带到请求头cookie中