# 开发和生产环境跨域
注意：只有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
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
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
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
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
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
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
2
3
← 数据缓存 APP整包升级/更新 →