前端微服务
💡 Tips:可以将多个系统融合成一个系统,无技术壁垒,可以像iframe一样实现功能组合
● qiankun (阿里支持)
● micro-app (京东支持)本人推荐
● wujie (腾讯支持)本人推荐
● lingjie 携程支持(团队已跑路)
使用微服务会导致跨域问题
💡 Tips:跨域就是非同源网站发起请求,浏览器安全策略保护机制导致的
● 文件跨域:html页面,静态资源跨域等
● 接口跨域:get,post等等请求跨域
跨域问题解决
💡 Tips:这里以Nginx 配置为例
Nginx 配置详解,例子内关键行都有注释;
跨域遵循谁被引用,配置谁的原则(既配置子应用的Nginx)
listen 8088;
server_name 10.72.159.xxx;
location / {
root /jur;
index index.html index.htm;
try_files $uri $uri/ /index.html;
# 使得html文件可以在跨域访问
add_header Access-Control-Allow-Origin *;
}
location /api/ {
add_header 'Access-Control-Allow-Origin' '$http_origin';
add_header 'Access-Control-Allow-Credentials' "true";
# 由于跨域请求会先发起option(预检)请求,而预检请求要告诉客户端哪些东西能通过因此关键配置option请求即可
if ($request_method = 'OPTIONS') {
# 使得请求从哪其他位置来可以通过
add_header 'Access-Control-Allow-Origin' $http_origin;
# 使请求可以携带cookie
add_header 'Access-Control-Allow-Credentials' 'true';
# 告诉客户端哪些请求可以通过
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PATCH, PUT';
# 设置请求最大值
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
# add_header 'Content-Type' 'application/json;charset=UTF-8';
# 允许自定义authorization请求头通过
add_header 'Access-Control-Allow-Headers' 'authorization,Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE';
# 不限制内容长度
add_header 'Content-Length' 0;
# 返回通过code
return 204;
}
# 请求转发
proxy_pass http://xx.xxx.xxx.xxx:8000/api/;
proxy_redirect default;
proxy_cookie_path ~*^/.* /;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 18000;
proxy_send_timeout 18000;
proxy_read_timeout 18000;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
如果Ngnix是通过docker启动的
💡 Tips:docker启动Nginx 需要配置docker-componse.yml文件
docker-componse.yml需要配置文件/目录/端口等映射关系,否则基于docker启动的Nginx无法访问
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。