服务器说明：
服务器A：域名www.aaa.com，部署nuxt代码【端口3000】和nginx代理【端口80】
服务器B：域名www.bbb.com，部署后端接口代码（java、.net等后端程序实现）【端口80】
- 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错误处理
}
})
}
- 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;
}
}
感觉写的挺乱，先这样吧，以后再整理
网友评论