美文网首页
nuxt + nginx 前后端不同服务器代理配置

nuxt + nginx 前后端不同服务器代理配置

作者: DaFengS | 来源:发表于2019-05-18 18:34 被阅读0次

服务器说明:
服务器A:域名www.aaa.com,部署nuxt代码【端口3000】和nginx代理【端口80】
服务器B:域名www.bbb.com,部署后端接口代码(java、.net等后端程序实现)【端口80】

  1. nuxt中,对axios插件的自定义扩展配置【文件plugins/axios.js】,需要增加node服务端请求设置,config.headers.host = req.headers.host,这样发送到服务器时,请求的域名可以是原始域名

样例代码 plugins/axios.js

/**
 * @param {import('@nuxt/vue-app').Context} ctx
 */
export default function(ctx) {
  const { $axios, req, redirect, route } = ctx

  /**
   * 发送前拦截
   */
  $axios.onRequest(config => {
    if (process.client) {
      // 浏览器执行的客户端代码
    }
    if (process.server) {
      // node执行的服务端代码
      // node服务端做host穿透-重点在这里哟
      config.headers.host = req.headers.host
    }
  })
  /**
   * 返回结果拦截
   */
  $axios.onResponse(response => {
    // 可以添加处理代码

    // 或者不处理直接返回response
    return response
  })

  /**
   * 错误拦截
   */
  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 404) {
      // 404错误处理
    }
  })
}
  1. nginx部署在运行前端代码的服务器,nuxt框架优势在于可以直接使用SSR,支持node服务端渲染,所以nuxt的运行环境是node。
    nginx下没有任何的执行代码,只用来做代理,根目录默认代理nuxt的3000端口,nuxt访问后端接口的前缀是api,nginx代理配置代码样例如下:
#上游模块接口-前端地址
upstream project_vue {                                                         
  server www.aaa.com:3000;                                                
  keepalive 2000;
}
#上游模块接口-后端地址
upstream project_java {                                                         
  server www.bbb.com;                                                
  keepalive 2000;
}

#nginx请求映射的代理配置
server {
  listen       80;
  server_name  www.aaa.com;
  #charset koi8-r;

  #access_log  logs/host.access.log  main;

  #后端接口代理,目录层级越多的代理,需要放在前边
  location /api/ {
    #文本替换修正uri,看需要启用,我这里接口也是api开头,所以没有启用替换
    #rewrite ^/api/(.*) /$1 break;
    #代理地址
    proxy_pass http://project_java;
    #域名穿透,可以将原始的请求域名,放在请求中发给接口,当前例子中,www.bbb.com收到的请求域名是www.aaa.com
    proxy_set_header Host $host:$server_port;
    #root   html;
    #index  index.html index.htm;
  }
  #前端代理,目录层级越少的代理,需要放在前边
  location / {
    proxy_pass http://project_vue/;
    proxy_set_header Host $host:$server_port;
  }
}

感觉写的挺乱,先这样吧,以后再整理

相关文章

  • nuxt + nginx 前后端不同服务器代理配置

    服务器说明:服务器A:域名www.aaa.com,部署nuxt代码【端口3000】和nginx代理【端口80】服务...

  • 反向代理,后端Apache获取真实IP地址

    反向代理,后端Apache获取真实IP地址 在配置负载均衡时,nginx做代理服务器,Apache做web服务,但...

  • Nginx服务器的rewrite指令和案例

    1.Nginx后端服务器组配置指令 这些指令用于设置反向代理、负载均衡、web缓存服务。 2.### Rewrit...

  • 2022-01-11-🗳🗳nginx转发小能手

    需要把前后端分离的项目部署到服务器,前端静态资源通过nginx代理访问,接口请求代理到指定端口的服务上,先看配置:...

  • nginx的几(4)种负载算法模式

    nginx 负载均衡5种配置方式 轮询(默认)每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down...

  • nginx配置反向代理

    反向代理配置 说明:proxy_pass指令,代理后端服务器的地址。 配置代理常用指令 proxy_redirec...

  • Mac配置Nginx

    Nginx配置 局域网内反向代理服务器 1、下载安装Nginx brew install nginx 2、配置Ng...

  • Nginx 跨域配置文件

    项目重构中,我们需要进行前后端分离,而且前后端分别部署在不同的服务器,而且不通过 Nginx 做反向代理,所以,后...

  • Nginx面试题

    什么是Nginx? nginx是一个web服务器,反向代理服务器,缓存服务器 为什么使用nginx 跨平台,配置简...

  • 反向代理与负载均衡

    反向代理 配置了反向代理之后,浏览器是和Nginx服务器直接建立的连接,Nginx又和上游服务器建立连接,那么上游...

网友评论

      本文标题:nuxt + nginx 前后端不同服务器代理配置

      本文链接:https://www.haomeiwen.com/subject/lintzqtx.html