# 开发和生产环境跨域

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

# 开发环境

  1. 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
  1. 根据不同平台,自定义全局配置baseUrl,参考代码config/index.js

原理:h5端配置api前缀,然后proxy代理(在manifest.jsonproxy); 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
  1. 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代理配置

  1. 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
  1. http {} 下变量service配置

 


upstream service {
    server rap2.taobao.org:38080 max_fails=1 fail_timeout=10s;
}
1
2
3
Last Updated: 8/20/2020, 10:27:32 AM