# 开发和生产环境跨域

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

# 开发环境

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

"h5" : {
  "devServer" : {
      "port" : 9090,
      "disableHostCheck" : true,
      "proxy" : {
          "/api" : {
              "target" : "http://rap2.taobao.org:38080/app/mock/263960",
              "changeOrigin" : true,
              "secure" : false,
              "pathRewrite" : {
                  "^/api" : ""
              }
          }
      }
  }
}

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

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

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

/**
 * ip地址或域名
 */
const ipAddress = 'http://rap2.taobao.org:38080/app/mock/263960'
/**
 * api前缀
 */
const apiPrefix = '/api'
/**
 * 针对不同平台的baseUrl
 */
const getBaseUrl = () => {
	// #ifdef H5
	return apiPrefix
	// #endif
	// #ifndef H5
	return ipAddress
	// #endif
}
export default {
	/**
	 * 针对不同平台的baseUrl
	 */
	baseUrl: getBaseUrl()
}

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

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

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

1
2
3
4
5

# 生产环境

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

# 前端访问代理
location /ua {
  alias /root/ua;
  index index.html index.htm;
  try_files $uri $uri/ /index.html?/$request_uri;
}
# 服务端代理，对应开发环境proxy
location ~/ua/ua-service/* {
  rewrite ^/ua/(.*)$ /$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;
}
# 服务端代理，对应开发环境proxy
location ~/ua-service/* {
  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
17
18
19
20
21
22
23
24
25
26
27

其中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 ^/ua/(.*)$ /$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

← 数据缓存 APP整包升级/更新 →