Thoroughly solve the cross-domain problem of uniapp published as H5

1. uniapp is published as a website-PC Web or mobile phone H5 cross-domain

When developing with HBuilder, there is no cross-domain problem when previewing with the built-in browser. When publishing as H5, there will be cross-domain problems when calling the background interface, as shown in the figure below
insert image description here

Second, what is cross-domain?

When any of the protocol, domain name, and port of a request url is different from the current page url, it is cross-domain

current page url	The requested page url	Whether cross-domain	reason
http://www.test.com/	http://www.test.com/index.html	no	Same origin (same protocol, domain name, port number)
http://www.test.com/	https://www.test.com/index.html	cross domain	The protocol is different (http/https)
http://www.test.com/	http://www.baidu.com/	cross domain	The main domain name is different (test/baidu)
http://www.test.com/	http://blog.test.com/	cross domain	Different subdomains (www/blog)
http://www.test.com:8080/	http://www.test.com:7001/	cross domain	Different port numbers (8080/7001)

Three, nginx solves cross-domain

Configure multiple locations in one server, and forward requests from the front and back ends. The
specific configuration is as follows:

1. Change the back-end address requested by the front-end project to the IP of the server where nginx is located and the listening port number
insert image description here

2. After publishing as H5, put it in the following position

3, Modify the configuration file of nginx


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  100;
    #gzip  on;

    server {
		listen 8090;# 监听的端口号
	    server_name localhost;# 域名
	    #index index.php index.html index.htm default.php default.htm default.html;
	    gzip on;
	    gzip_static on;     # 需要http_gzip_static_module 模块
	    gzip_min_length 1k;
	    gzip_comp_level 4;
	    gzip_proxied any;
	    gzip_types text/plain text/xml text/css;
	    gzip_vary on;
	    gzip_disable "MSIE [1-6]\.(?!.*SV1)";
    
    
    # 后端接口地址 若新增后端路由前缀注意在此处添加（|新增）
    location / {
	   proxy_pass http://192.168.1.911:9999/;# 网关地址
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
       #proxy_set_header X-Real-IP $remote_addr;
       #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       #proxy_set_header X-Forwarded-Proto http;
    }
	
	#location ~* .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf){
	#   alias D:/Tools/nginx-1.12.2/html/creatar/;
	#   expires 30d;
	#}
	
    #前端页面地址
	location /creatar/ {
	   alias D:/Tools/nginx-1.12.2/html/creatar/;
	   #expires 30d;
	}
	
    # 避免端点安全问题
    if ($request_uri ~ "/actuator"){
        return 403;
    }
    }
}

4. Browser access,
enter the IP of the nginx server + the listening port number + the address of the page in the
insert image description here

address bar OK, and call it a day!!

There is more than one method, if there is something wrong, please let me know~~~