vue接口代理跨域设置

一、开发环境

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
下面是请求头结果:
图片.png
可以看到它请求的是8080,但实际上是请求了3000端口。

上面配置完可以访问成功,现在把它改为端口2000,看看它的反应:

 proxy: {
      "/api_hu66": {
        // 允许访问数据的计算机名称
        target: 'http://localhost:2000',
        ws: true, //启用webSocket
        changeOrigin: true, //开启代理跨域
        pathRewrite: {
          // 重写api地址
          '^/api_hu66': ""
        }
      },

图片.png
可以看到输出结果为 500 Error

并且可以看到报错信息:
图片.png

    • -

二、生产环境

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;
}

图片.png
配置好后访问结果居然是502错误网关,也就是NGINX找不到资源才报的错。

三、分析错误并配置好NGINX下的接口代理

那么会不会是我们配置项出了错误呢?

1.开始分析问题:

我们先分析一下开发下和生产环境下请求资源符的区别:

初次分析:

(1)开发环境下资源请求:
图片.png

(2)生产环境下资源请求:
图片.png

*分析下域名(即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
所以正常访问:
图片.png

生产环境下:

 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
图片.png
对不起,是我眼瞎!
改过来:

 location /api_hu66 {
            rewrite  ^.+api_hu66/?(.*)$ /$1 break;
            proxy_pass  http://127.0.0.1:3000;    #node api server 即需要代理的IP地址,此处为本机地址,模拟代理服务器
            }

再次访问:
图片.png

PS:这个眼瞎错误是我分析到最后才发现的,此文章写于边分析问题,边记录,写到最后才发现又是自己的眼瞎,令附:本来我是博客园的用户,但是博客园于:2021/3/18 12:00:00 开始整改,整改期间无法记录,所以转到此处记录文章。也即是昨天。
图片.png

所以用了思否,发现编辑器的代码编写的确比博客园好看多了。

在此说一下使用两个网站写博客的感受。

博客园使用感受:
1.博客园呢偏简洁但风格设计比较过时,对于一些追求时尚感的年轻人,会给人一些体验感没那么好的感觉,虽然它有可以选模板的功能,也开放自己修改模板的功能,但是设计出来的感觉的确没那么好。
2.博客园的代码的展示不够友好,放上去的代码的关键字高亮效果较差,这个也是用户体验不太的地方,还有就是贴代码的时候,只要不小心先贴了代码,首行就不可以贴上空白行,这个是编辑器用起来难受的地方(ps:发现突然进的去编辑区了,昨天还进不了,所以我才过来的,昨天连草稿箱功能都限制了,估计出于考虑用户的感受,急忙开放了草稿箱功能,不然用户就跑了),如下:
图片.png
上面的代码区上面就不能插入空白行,想插入就得删掉。
3.不过博客园的seo做的很好,在查问题的时候,经常受到的就是博客园以及CSDN的回答。
4.博客园的文章归类可以自己命名,并且进去之后有显示自己的各个文档名称:
图片.png
这个是我很喜欢的。

思否使用感受:

1.编辑器设计很不错,首先是字体看起来非常舒服,代码展示区无可挑剔,该高亮的高亮显示,样式很舒服,不过有一个缺点,就是只要我把贴上去的图片,继续在下面编辑文字,那么这个Markdown编辑器右边就会一直闪。

2.文章不能自己建立一个标签,集中管理,不能分类展示,这个用户体验很不好。各个就不如博客园了。

3.seo优化没那么好,经常搜到解决方案的不是思否。
``

图片.png
先这样吧。

你可能感兴趣的:(htmlnginxvue.js)