fuzuxian

iframe嵌入获取cookie/localStorage数据跨域的解决方案

9/4/2021 微前端

A项目嵌入B项目，

A项目：http://100.1.1.1:8088

B项目：http://100.2.2.2:8099/overview/index

定义B项目的标识符：projectBflag

# A项目

  • iframe的src的ip和端口保持一致，B项目就可以获取cookie、localStorage数据，不存在跨域。
//  配置：  A项目的ip和端口 + 标识词 + B项目的路由
<iframe src="http://100.1.1.1:8088/projectBflag/overview/index" width="1000px" height="600px"></iframe>

开发代理配置：
    proxy: {
      // 标识符--转发到B项目---为了请求到B项目的静态文件和配置文件
      '/projectBflag': { target: 'http://100.2.2.2:8099', },
      // ... B项目的后端接口代理设置
     }

nginx代理配置：
location /projectBflag/ {
    # 相当于访问 http://http://100.2.2.2:8099/projectBflag/，保留后缀
    proxy_pass http://http://100.2.2.2:8099/;
}
# 允许iframe嵌套
X-Frame-Options: sameorigin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# B项目

// 配置静态文件请求路径
  publicPath: '/projectBflag',
  outputDir: 'dist',
  assetsDir: 'static',

//配置文件放置路径： public/config.js    请求配置文件方式不需要改变
const getConfigurableVariable = () => axios.get('/config.json');

// 这样打包变成 
<script src=/projectBflag/static/js/chunk-elementUI.d51a30d0.js></script>

// 而打包之后的静态文件、配置文件的目录为：-- 注意静态文件
dist/static/js/chunk-elementUI.d51a30d0.js
dist/config.js

// nginx 代理配置---/projectBflag/static/---只针对静态文件
location ^~ /projectBflag/ {
  rewrite ^/projectBflag/(.*)  /$1 last;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

  • 后端接口代理

    • 如果B项目后端接口代理和A项目配在一起，则复制之前给A
    • 如果B项目后端接口代理不和A项目配在一起，依然配置在B自己的nginx中，则B项目axios需要设置路径前缀为projectBflag
axios.create({ baseURL: '/projectBflag', })
1