码迷,mamicode.com
首页 > 其他好文 > 详细

nginx 代理

时间:2019-07-01 21:34:22      阅读:148      评论:0      收藏:0      [点我收藏+]

标签: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
    }

 

nginx 代理

标签:for   mod   warnings   工作   url   class   系统   style   save   

原文地址:https://www.cnblogs.com/ihuangqing/p/11116737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!