关于html:vue接口代理跨域设置

97次阅读

共计 5153 个字符，预计需要花费 13 分钟才能阅读完成。

一、开发环境

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 优化没那么好，常常搜到解决方案的不是思否。
“


先这样吧。

正文完
html
发表至： html
2021-03-21
 0
关于前端:前端面试每日-31-第729天
关于html:前端面试实录HTML篇
关于html:滑动拼图验证码水印Logo修改
关于html:地址栏里输入一个网址敲下回车会发生什么