uniapp项目发布成H5 本地运行和发布服务器nginx代理

uniapp项目发布成H5 本地运行和发布服务器nginx代理

1.本地运行跨域设置
manifest.json的h5中添加

"devServer" : {
            "https" : true,
            "port" : 80, //端口号
            "disableHostCheck" : true
        },
         ,
                 "proxy" : {
                      "/api" : {
                          "target" : "https://xx.xxx.com", //目标接口域名
                         "changeOrigin" : true, //是否跨域
                         "secure" : false, // 设置支持https协议的代理
                          "pathRewrite" : {
                              "^/api" : "" //匹配请求路径里面有 /api 替换成 http://ceshi.dishait.cn
                         }
                      }
                  }

对应的请求路径

const requestBase = "https://xx.xxx.com/"

https://xx.xxx.com/generator/tpurchasemalladvertisemententerprise/login

替换为

api/generator/tpurchasemalladvertisemententerprise

2.部署服务器

去掉第一步中的本地运行h5的设置

h5设置中端口设置为nginx代理端口

发行打包 将h5整个文件夹放到服务器根目录 /h5
nginx设置

server {

    listen 80;
    server_name xxx.xxx.xxx.com;
	server_tokens off;
	location / {
	            limit_req zone=ConnLimitZone burst=50 nodelay;
				root   /h5;
				index  index.html index.htm;
				autoindex on;    
			}	


  }

后台接口springboot设置全局跨域

@Configuration
public class AuthenConfigurerAdapter implements WebMvcConfigurer {
 @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")
                .maxAge(3600);
    }
}

接口请求一开始用域名 发现还是被跨域拦截
直接用ip:端口形式

const requestBase = "http://xx.xx.xx.xx:8097/"

访问http://xxx.xxx.xxx.com成功