Uniapp solves the cross domain problem of Google browser and runs in Google browser

I've been writing about uniapp project however app Cannot run on Google Chrome Error is reported when running
Later, I read the error message , It's a cross domain issue ,

So the official recommended HBuilderX Built in browser , To tell you the truth, it's very convenient to use it for a long time , The main reason is that I am a single screen , It is very inconvenient to always switch back and forth , But I still want to solve this cross domain problem , All right. , I don't say much nonsense , Code up ~~~

1. stay manifest.json In the source code view of , Using a proxy server

"h5" : {
    
        "router" : {
    
            "mode" : "hash"
        },
        "devServer" : {
    
            "https" : false,
            // "port": 8000, // Port number 
            // "disableHostCheck": true,
            "proxy" : {
    
                "/api" : {
    
                    "target" : "http://www.XXX.XXXX.XXXXX666.com", // Here is your target interface domain name 
                    "changeOrigin" : true, // Cross domain or not 
                    "secure" : false, //  Setting up support https Agent of the agreement 
                    "pathRewrite" : {
    
                        "^/api" : "/"
                    }
                },
                "/formalAPI" : {
    
                    "target" : "http://www.XXXXX.com/",
                    "changeOrigin" : true, // Cross domain or not 
                    "secure" : false, //  Setting up support https Agent of the agreement 
                    "pathRewrite" : {
    
                        "^/formalAPI" : "/"
                    }
                }
            }
        }
    }

2. I wrote two agents above Because I have a test environment and a formal environment I am too lazy to change every time, so I wrote two API agent
Because it's encapsulated requeset request So we need to write the domain name of our proxy in the encapsulated request
Https.js page

const process= 'development';
var baseURL = '/api';
if(process === 'development'){
    
    console.log(' development environment / Test environment ')
    // baseURL = '/api';
}else{
    
    console.log(' Production environment / Formal environment ')
	baseURL = '/formalAPI';
}

3. Similarly, if you are main.js The page is set with global baseURL It's the same

Vue.prototype.baseUrl = '/api';

4. After setting, restart the whole project Then run to Google Chrome The cross domain problem is solved
Last picture

By the way, at last, let's talk about what needs attention ：
Be careful ： When I use a proxy server to run on Google Chrome , Then use the real machine to debug , You're going to report a mistake , Can't recognize /api, So I finally used the built-in browser .