# 开发和生产环境跨域

注意：只有H5平台才会存在跨域，其他平台不存在跨域；跨域的解决方法之一就是采用代理

# 开发环境

在manifest.json源码视图中，修改h5部分，添加端口port和代理proxy，这里会拦截请求路径中有/api的所有接口，所以在config/index.js配置api前缀为/api，只限H5平台。

"h5" : {
  "devServer" : {
    "port" : 9090,
    "disableHostCheck" : true,
    "proxy" : {
      "/apiGithub" : {
          "target" : "https://api.github.com",
          "changeOrigin" : true,
          "secure" : false,
          "pathRewrite" : {
              "^/apiGithub" : ""
          }
      },
      "/apiToken" : {
          "target" : "https://github.com",
          "changeOrigin" : true,
          "secure" : false,
          "pathRewrite" : {
              "^/apiToken" : ""
          }
      },
      "/apiContri" : {
          "target" : "https://github-3d-contribution.herokuapp.com",
          "changeOrigin" : true,
          "secure" : false,
          "pathRewrite" : {
              "^/apiContri" : ""
          }
      },
      "/apiTrending" : {
          "target" : "https://ghapi.huchen.dev",
          "changeOrigin" : true,
          "secure" : false,
          "pathRewrite" : {
              "^/apiTrending" : ""
          }
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

根据不同平台，自定义全局配置baseUrl，参考代码config/index.js

原理：h5端配置api前缀，然后proxy代理（在manifest.json的proxy）； APP端不存在跨域问题，直接配置全域名或ip地址即可。

// after authorized
const ipAddress = 'https://api.github.com'
/**
 * api prefix
 */
const apiPrefix = '/apiGithub'
/**
 * api after authorized
 */
const getBaseUrl = () => {
	// #ifdef H5
	return apiPrefix
	// #endif
	// #ifdef APP-PLUS
	return ipAddress
	// #endif
}
export default {
	baseUrl: getBaseUrl()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在ui.request的参数选项中配置baseUrl，参考代码api/api.js

// 设置默认配置
minRequest.setConfig((config) => {
  config.baseURL = globalConfig.baseUrl
  return config
})

1
2
3
4
5

# 生产环境

生产环境的跨域，典型的方案就是采用Nginx代理

# frontend
location /funcode {
  alias /opt/client/funcode;
  index index.html index.htm;
  try_files $uri $uri/ /index.html?/$request_uri;
}

# backend
location ~/apiGithub/* {
        rewrite ^/apiGithub/(.*)$ /$1/ break;
        proxy_pass https://api.github.com;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout 360000s;
        proxy_read_timeout 360000s;
        proxy_send_timeout 360000s;
        #proxy_set_header Host $host;
        #proxy_set_header X-Real-IP $remote_addr;
        #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~/apiToken/* {
        rewrite ^/apiToken/(.*)$ /$1/ break;
        proxy_pass https://github.com;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout 360000s;
        proxy_read_timeout 360000s;
        proxy_send_timeout 360000s;
}
location ~/apiContri/* {
        rewrite ^/apiContri/(.*)$ /$1/ break;
        proxy_pass https://github-3d-contribution.herokuapp.com;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout 360000s;
        proxy_read_timeout 360000s;
        proxy_send_timeout 360000s;
}
location ~/apiTrending/* {
        rewrite ^/apiTrending/(.*)$ /$1/ break;
        proxy_pass https://ghapi.huchen.dev;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout 360000s;
        proxy_read_timeout 360000s;
        proxy_send_timeout 360000s;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

其中proxy_pass http://service的service是配置在nginx的http{}下的后端服务

upstream service {
  server 127.0.0.1:8080 max_fails=1 fail_timeout=10s;
}

1
2
3

rewrite ^/apiGithub/(.*)$ /$1/ break;是路径替换，第一个参数是正则表达式，$1是正则表达式中第一个括号内容。

# rap2 Nginx代理配置

server {} 下配置

location / {
    root /opt/client/ua;
    index index.html index.htm;
    try_files $uri $uri/ /index.html?/$request_uri;
}

location ~/api/* {
    rewrite ^/api/(.*)$ /app/mock/263960/$1/ break;
    proxy_pass http://service;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_connect_timeout 360000s;
    proxy_read_timeout 360000s;
    proxy_send_timeout 360000s;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

http {} 下变量service配置

upstream service {
    server rap2.taobao.org:38080 max_fails=1 fail_timeout=10s;
}

1
2
3

← 数据缓存项目卡片 →