一、开发环境
1.开发环境下vue.config.js配置：
proxy: {
"/api_hu66": {
// 允许访问数据的计算机名称及端口
target: 'http://localhost:3000',
ws: true, //启用webSocket
changeOrigin: true, //开启代理跨域
pathRewrite: {
// 重写api地址
'^/api_hu66': ""
}
},本地项目运行端口为：8080，上面就会把访问我本地端口运行的项目请求的接口进行转发重写,即http://localhost:8080/api_hu66映射为http://localhost:3000/api_hu66
下面是请求头结果：
可以看到它请求的是8080，但实际上是请求了3000端口。
上面配置完可以访问成功，现在把它改为端口2000，看看它的反应：
proxy: {
"/api_hu66": {
// 允许访问数据的计算机名称
target: 'http://localhost:2000',
ws: true, //启用webSocket
changeOrigin: true, //开启代理跨域
pathRewrite: {
// 重写api地址
'^/api_hu66': ""
}
},
可以看到输出结果为 500 Error
并且可以看到报错信息：
-
- -
二、生产环境
1.开发环境下NGINX配置：
server
{
listen 80;#监听本地服务器80端口
server_name humianyuan.cn;#服务器ip地址或域名
index index.html index.htm index.php;
root /www/wwwroot/humianyuan.cn/dist;#静态页面的index.html存放目录
#location存放的是网页地址
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#/api_hu66 是你自己定义的接口名称，你后台自己定义的
location /api_hu66 {
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000; #node api server 即需要代理的IP地址
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
#error_page 404 /404.html;
include enable-php.conf;
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location ~ .*\.(js|css)?$
{
expires 12h;
}
location ~ /\.
{
deny all;
}
access_log /www/wwwlogs/access.log;
}
include /www/server/panel/vhost/nginx/*.conf;
}配置文件的try\_files下的配置也可以这样写：#location存放的是网页地址信息，需要首地址页面作为入口 location / { try_files $uri $uri/ /index.html;#主要是找到index.html目录就好 root /www/wwwroot/humianyuan.cn/dist; index index.html index.htm; }
完整内容为：
server
{
listen 80;#监听80端口
server_name humianyuan.cn;
#location存放的是网页地址
location / {
try_files $uri $uri/ /index.html;#试图找到dist下的index.html为入口
root /www/wwwroot/humianyuan.cn/dist;
index index.html index.htm;
}
#上面这样前端静态模块配置好了
#配置前端动态模块，即ajax请求重定向，即代理服务，实现本地接口的访问
#/api_hu66 是你自己定义的接口名称，你后台自己定义的
location /api_hu66 {
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000; #node api server 即需要代理的IP地址
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
#error_page 404 /404.html;
include enable-php.conf;
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location ~ .*\.(js|css)?$
{
expires 12h;
}
location ~ /\.
{
deny all;
}
access_log /www/wwwlogs/access.log;
}
include /www/server/panel/vhost/nginx/*.conf;
}
配置好后访问结果居然是502错误网关，也就是NGINX找不到资源才报的错。
三、分析错误并配置好NGINX下的接口代理
那么会不会是我们配置项出了错误呢？
1.开始分析问题：
我们先分析一下开发下和生产环境下请求资源符的区别：
初次分析：
（1）开发环境下资源请求：
（2）生产环境下资源请求：
*分析下域名（即ip地址）：
开发环境下：http://localhost:8080 生产环境下：http://humianyuan.cn
对比无误，因为默认的端口号如果是80的话，可以不加上的，所以其实完整的对比是：
开发环境下：http://localhost:8080 生产环境下：http://humianyuan.cn：80
ip地址对应：http://localhost => http://humianyuan.cn
端口号对应：：8080 => 80
对比无误。
*分析剩下的资源地址符：
开发环境下：api_hu66/home/article?page=1 生产环境下：api_hu66/home/article?page=1
对比无误。
初次分析总结：资源符号 一 一 对应，结论：无错误。
二次分析：
开发环境下接口代理配置：
proxy: {
"/api_hu66": {
// 允许访问数据的计算机名称及端口
target: 'http://localhost:3000',
ws: true, //启用webSocket
changeOrigin: true, //开启代理跨域
pathRewrite: {
// 重写api地址
'^/api_hu66': ""
}
},生产环境下接口代理配置：
location /api_hu66 {
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000; #node api server 即需要代理的IP地址，此处为本机地址，模拟代理服务器
#下面是配置远程服务器的选项，但是我们配置的是本地服务器的接口，下面配置等下再演示
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}*分析代理接口名称配置：
开发环境下代理接口名称：/api_hu66 => 生产环境下代理接口名称：/api_hu66
对比无误。
*分析目标服务器：
开发环境下代理服务器配置：http://127.0.0.1:3000 => 生产环境下代理服务器：http://127.0.0.1:3000
对比无误。
*分析重定向资源符名称配置：
开发环境下：
"/api_hu66": {
// 允许访问数据的计算机名称及端口
target: 'http://localhost:3000',
ws: true, //启用webSocket
changeOrigin: true, //开启代理跨域
pathRewrite: {
// 重写api地址
'^/api_hu66': ""//将http://localhost:3000代替^位置
}用来代理的服务器名称：http://localhost:3000，重写后代理的资源符地址为：http://localhost:3000/api_hu66
所以本地服务器只要访问http://localhost:80/api_hu66就会映射到ttp://localhost:3000/api_hu66
所以正常访问：
生产环境下：
location /api_hu66 {
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000; #node api server 即需要代理的IP地址，此处为本机地址，模拟代理服务器
}用来代理的服务器名称：http://localhost:3000，重写后代理的资源符地址为：http://localhost:3000/api
所以本地服务器只要访问http://localhost:80/api_hu66就会映射到ttp://localhost:3000/api
所以上面重写后资源地址符名称为：http://localhost:3000/api/home/article?page=1
而我当前的请求的资源地址符为：http://localhost:3000/api_hu66/home/article?page=1
对不起，是我眼瞎！
改过来：
location /api_hu66 {
rewrite ^.+api_hu66/?(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000; #node api server 即需要代理的IP地址，此处为本机地址，模拟代理服务器
}再次访问：
PS:这个眼瞎错误是我分析到最后才发现的，此文章写于边分析问题，边记录，写到最后才发现又是自己的眼瞎，令附：本来我是博客园的用户，但是博客园于：2021/3/18 12:00:00 开始整改，整改期间无法记录，所以转到此处记录文章。也即是昨天。
所以用了思否，发现编辑器的代码编写的确比博客园好看多了。
在此说一下使用两个网站写博客的感受。
博客园使用感受：
1.博客园呢偏简洁但风格设计比较过时，对于一些追求时尚感的年轻人，会给人一些体验感没那么好的感觉，虽然它有可以选模板的功能，也开放自己修改模板的功能，但是设计出来的感觉的确没那么好。
2.博客园的代码的展示不够友好，放上去的代码的关键字高亮效果较差，这个也是用户体验不太的地方，还有就是贴代码的时候，只要不小心先贴了代码，首行就不可以贴上空白行，这个是编辑器用起来难受的地方（ps:发现突然进的去编辑区了，昨天还进不了，所以我才过来的，昨天连草稿箱功能都限制了，估计出于考虑用户的感受，急忙开放了草稿箱功能，不然用户就跑了），如下：
上面的代码区上面就不能插入空白行，想插入就得删掉。
3.不过博客园的seo做的很好，在查问题的时候，经常受到的就是博客园以及CSDN的回答。
4.博客园的文章归类可以自己命名，并且进去之后有显示自己的各个文档名称：
这个是我很喜欢的。
思否使用感受：
1.编辑器设计很不错，首先是字体看起来非常舒服，代码展示区无可挑剔，该高亮的高亮显示，样式很舒服，不过有一个缺点，就是只要我把贴上去的图片，继续在下面编辑文字，那么这个Markdown编辑器右边就会一直闪。
2.文章不能自己建立一个标签，集中管理，不能分类展示，这个用户体验很不好。各个就不如博客园了。
3.seo优化没那么好，经常搜到解决方案的不是思否。
``
先这样吧。