一、开发环境1.开发环境中vue.config.js配置：proxy:{"/api_hu66":{//允许访问数据的计算机名和端口target:'http://localhost:3000',ws:true,//开启webSocketchangeOrigin: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,//开启webSocketchangeOrigin:true,//开启代理跨域pathRewrite:{//重写api地址'^/api_hu66':""}},可以看到输出结果为500Error可以看到Errormessage:-2.生产环境1.开发环境配置NGINX:server{listen80;#监听本地服务器80端口server_namehumianyuan.cn;#服务器ip地址或域名索引index.htmlindex.htmindex.php;root/www/wwwroot/humianyuan.cn/dist;#静态页面index.html存放目录#location存放网页地址location/{try_files$uri$uri/@router;#需要指向后面的@router否则vue会出现404indexindex.htmlindex.htm在nginx中刷新路由时出现；}#对应上面的@router，主要是路由的路径资源不是真实的路径，所以找不到具体的文件#所以需要重写成index.html，然后交给处理请求资源位置的路由@router{rewrite^.*$/index.htmllast;}#/api_hu66是你自己定义的接口名，后台你定义的location/api_hu66{rewrite^.+api/?(.*)$/$1中断；proxy_passhttp://127.0.0.1:3000;#nodeapiserver是需要代理的IP地址proxy_redirectoff;proxy_set_header主机$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;}#error_page404/404.html;包括启用-php.conf；位置~.*\.(gif|jpg|jpeg|png|bmp|swf)${过期30天；}location~.*\.(js|css)?${过期12h;}位置~/\.{全部拒绝;}access_log/www/wwwlogs/access.log;}include/www/server/panel/vhost/nginx/*.conf;}配置文件的try\_files下的配置也可以这样写：#location存放的是网页地址信息，第一个地址页是requiredastheentrylocation/{try_files$uri$uri//index.html;#主要是找到index.html目录root/www/wwwroot/humianyuan.cn/dist;indexindex.htmlindex.htm;}完整内容为：server{listen80;#监听80端口server_namehumianyuan.cn;#location存放网页地址location/{try_files$uri$uri//index.html;#尝试在dist下找到index.html作为入口root/www/wwwroot/humianyuan.cn/dist;indexindex.htmlindex.htm;}#前端静态模块这样配置#配置前端动态模块，即ajax请求重定向，即代理服务，实现本地接口访问#/api_hu66是自己定义的接口名，你后台自己定义的Location/api_hu66{rewrite^.+api/?(.*)$/$1break;proxy_passhttp://127.0.0.1:3000;#nodeapiserver是需要代理的IP地址proxy_redirectoff;proxy_set_header主机$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;}#error_page404/404.html;包括启用-php.conf；位置~.*\.(gif|jpg|jpeg|png|bmp|swf)${过期30天；}location~.*\.(js|css)?${过期12h;}地点~/\.{全部拒绝;}access_log/www/wwwlogs/access.log;}include/www/server/panel/vhost/nginx/*.conf;}配置后访问结果其实是502wronggateway，也是NGINX找不到资源报错。3、分析错误，在NGINX下配置接口代理。会不会是我们的配置项不对？1.开始分析问题：先分析一下开发环境和生产环境请求资源字符的区别：初步分析：（1）开发环境请求资源：（2）生产环境请求资源：*分析域名（即ip地址）：开发环境中：http://localhost:8080生产环境中：http://humianyuan.cn比较正确，因为如果默认端口号是80，可以省略，所以完整的对比其实是：开发环境中：http://localhost:8080生产环境中：http://humianyuan.cn：对应80ip地址：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,//enablewebSocketchangeOrigin:true,//开启代理跨域pathRewrite:{//重写api地址'^/api_hu66':""}},生产环境接口代理配置:location/api_hu66{rewrite^.+api/?(.*)$/$1休息；proxy_passhttp://127.0.0.1:3000;#nodeapiserver是需要代理的IP地址。配置本地服务器的接口，下面的配置将演示proxy_redirectoff；proxy_set_header主机$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-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,//启用webSocketchangeOrigin:true,//开启代理跨域pathRewrite:{//重写api地址'^/api_hu66':""//将http://localhost:3000替换为^location}forproxyservername:http://localhost:3000，改写后agent的资源地址为：http://localhost:3000/api_hu66，这样本地服务器只要访问http://localhost:80/api_hu66，就会映射到ttp：//localhost:3000/所以api_hu66是正常访问的：在生产环境中：location/api_hu66{rewrite^.+api/?(.*)$/$1break;proxy_passhttp://127.0.0.1:3000;#nodeapiserver是需要代理的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/?(.*)$/$1break;proxy_passhttp://127.0.0.1:3000;#nodeapiserver是需要代理的IP地址，这里是本机地址，模拟代理服务器}再次访问：PS：这个盲错是我分析到最后才发现的，这篇文章是一边分析问题一边记录，写到最后才发现自己又瞎了。附：我本来是博客园的用户，但是博客园在：2021/3/1812:00:00开始整改，整改期间无法记录，所以昨天才到这里记录文章。所以用了四物之后发现小编的代码写的确实比博客园好多了。先说说用两个网站写博客的感受吧。博客园使用心得：1、博客园比较简单，但是风格设计比较陈旧。对于一些追求时尚感的年轻人来说，会给人一种体验感不太好的感觉。虽然它有选择模板的功能，也开启了自己修改模板的功能，但是设计出来的感觉真的没有那么好。2、博客园代码展示不够友好，发布代码关键词高亮效果差。不能粘贴空行，这是小编难受的地方（ps：发现突然进入编辑区，昨天进不去，所以就来了。昨天连功能草稿箱被限制了，估计是考虑到用户的感受，草草打开了草稿箱功能，不然用户跑了），如下：上面代码区不能插入空行，必须如果要插入它们，请删除它们。3.不过，博客园的SEO做的很好。查题的时候经常会收到博客园和CSDN的回答。4、博客园的文章分类可以自己命名，进入后可以显示自己的文档名称：这个是我很喜欢的。使用编辑器的感受：1.编辑器的设计非常好。首先，字体看起来很舒服。代码显示区域无可挑剔。亮点要突出，风格很舒服。上图片，继续编辑下面的文字，此时Markdown编辑器右侧会一直闪动。2.文章不能自己创建标签，集中管理，不能分类展示。这种用户体验非常糟糕。一个个都不如博客园。3.SEO优化不太好，经常找解决方案的不是师父。``让我们先做这个。
