前端跨域问题解决办法, Nginx配置为例 nginx

前端微服务 Tips：可以将多个系统融合成一个系统，无技术壁垒，可以像iframe一样实现功能组合
● qiankun （阿里支持）
● micro-app （京东支持）
● wujie （腾讯支持）本人推荐
使用微服务会导致跨域问题 Tips：跨域就是非同源网站发起请求，浏览器安全策略保护机制导致的
● 文件跨域：html页面，静态资源跨域等
● 接口跨域：get，post等等请求跨域
跨域问题解决 Tips：这里以Nginx 配置为例
Nginx 配置详解，例子内关键行都有注释；

跨域遵循谁被引用，配置谁的原则

listen8088; server_name10.72.159.133; location / { root /jur; index index.html index.htm; try_files $uri $uri/ /index.html; # 使得html文件可以在跨域访问 add_header Access-Control-Allow-Origin *; } location /api/ { # 由于跨域请求会先发起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_timeout18000; proxy_send_timeout18000; proxy_read_timeout18000; } error_page500 502 503 504/50x.html; location = /50x.html { root html; } }

如果Ngnix是通过docker启动的 【前端跨域问题解决办法, Nginx配置为例】 Tips：docker启动Nginx 需要配置docker-componse.yml文件
docker-componse.yml需要配置文件/目录/端口等映射关系，否则基于docker启动的Nginx无法访问