前端线上接口503-nginx跨域proxy_pass；proxy_set_header；vue-router使用history模式dockerfile配置

前端线上接口503-nginx跨域

前提：vue项目本地接口通过proxy都可使用，但是项目部署在服务器上后发现所有接口出现503如下状况
简而言之：页面部署在域名为https://aa.bb.cc.com/vehicle/#/下，但是我接口需访问的是https:// azz.qqv.com/permission/company/group,而现在接口访问的是https://aa.bb.cc.com/permission/company/group

解决方案：使用nginx前端跨域
部署Dockerfile

FROM docker./node14:0.0.3
EXPOSE 80
WORKDIR /code
COPY . /code

RUN rm -rf build
RUN yarn install
RUN yarn run build

COPY nginx.conf /etc/nginx/nginx.conf
RUN mv dist /usr/share/nginx/html/vehicle
RUN rm -rf /code

CMD ["nginx", "-g", "daemon off;"]

在项目中创建nginx.conf文件

events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    server {
        listen 80;  // 指定监听的端口号
        location /vehicle {
            alias   /usr/share/nginx/html/vehicle;
            index  index.html index.htm;
        }
        location /vehicle/permission {  // 反向代理配置
            proxy_http_version 1.1; // #Nginx服务器提供代理服务的http协议版本1.0，1.1，默认设置为1.0版本
            rewrite ^/vehicle/permission/(.*)$ /permission/$1 break; // url地址重定向
            proxy_pass https://azz.qqv.com;  // 后端服务器地址
        }
    }
}

vue.config.js中

api请求时，正常接口域名后的先跟/vehicle

看到这里 有些人就会迷糊 ，为什么普通的接口nginx跨域要加一个/vehicle的未知名的内容？
其实这归根结底就是gs运维小哥把我项目部署环境ingress配置path: /vehicle，导致如果 我只是接口的pathname我所调用的接口到了其他服务为path:/下，加在/vehicle就能首先访问到我的nginx里去
（ps：不会告诉你们的我一个项目部署加nginx跨域发了23次，我真的 很痛怕部署新项目啊外加运维真的很大爷化，原本以为游刃有余，结果每次都会出现点新的知识点）

以上一系列问题写完以后，发现有时候登录别的平台使用token冲突问题
可以设置一下proxy_set_header

events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    server {
        listen 80;
        location /vehicle {
            alias   /usr/share/nginx/html/vehicle;
            index  index.html index.htm;
        }
        location /vehicle/permission{
            proxy_http_version 1.1;
            proxy_set_header Host www.ddd.com;
            rewrite ^/vehicle/permission/(.*)$ /permission/$1 break;
            proxy_pass https://azz.qqv.com;
        }
    }
}

rewrite

正则

: 标记后续字符串为特殊字符串或原义字符或一个向后引用，如" “匹配一个换行符，而”$"则匹配为"$"
^: 匹配起始位置
$: 匹配结束位置
.: 匹配任何单个字符
*: 匹配前面的字符零次或多次
+: 匹配前面的字符一次或多次
?: 匹配前面的字符零次或一次，“?“等效于”{0, 1}”

vue-router使用history模式dockerfile配置

其实这个跟上面得案例差不多

业务背景

一般正常发布网址中含有#，如不想要#

当前网址	期望
https://aa.bb.cc.com/vehicle/#/	https://aa.bb.cc.com/vehicle/

vue-router知识回顾

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
	mode: 'history',
	routes: []
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

链接: vue-router history-mode 后端配置例子
解决方案：如URL配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是app依赖的页面

dockerfile配置

在dockerfile同级目录下新增文件default.conf

server {
	listen 80;
	server_name localhost;
	location / {
		root /usr/share/nginx/html;
		index index.html index.htm;
		try_files $uri $uri/ /index.html;
	}
	error_page 500 502 503 504 /50x.html;
	location = /50x.html {
		root /usr/share/nginx/html;
	}
}

更新dockerfile文件

FROM docker.ch/nginx:1.11.10
RUN rm /usr/share/nginx/html/*
RUN echo 123 > /usr/share/nginx/html/healthz
RUN mkdir -p /usr/share/nginx/html
 
//新增这一行-将我们自定义的配置文件加入nginx的默认配置
ADD default.conf /etc/nginx/conf.d/default.conf
 
COPY dist /usr/share/nginx/html