Vue loads pictures, maps, and requests api cross-domain problems

Vue loads pictures, maps, and requests api cross-domain problems to solve through proxy configuration proxy

1. Add the following configuration to the vue.config.js file

(proxyTable is used in the early cli2 project of vue, and proxy is used in the project after vue-cli3 version)

module.exports = {
    
    
  devServer: {
    
    
  	port: 8080,
    // 配置代理核心代码 --------------- start
    proxy: {
    
    
      "/gismap": {
    
    
        target: 'http://www.baidu.com',   
        changeOrigin: true,
        ws: true,
        pathRewirte: {
    
    
          // 这里是追加链接,比如真实接口里包含了 /gismap,就需要这样配置.
          '^/gismap': ''
        },
      },
    },
    // ------------------ end
  },
}

2. When using the request address:

// proxy配置代理名字 gismap + /后续路径地址
// eg: 
"url": "gismap/...xxx..."

//我们请求：http://localhost:8080/gismap/getSomething 就会被代理为：http://www.baidu.com/gismap/getSomething

3. The access address is wrong after packaging and deploying

Reason for error: After compiling and packaging, the front-end page becomes a separate static resource, and the proxy server devServer.proxy is extracted. In other words, devServer.proxy will not be packaged together in the dist folder, so it is equivalent to not configuring a proxy server

Solution:
Add a proxy to the conf folder in nginx

location /gismap/ {
                        proxy_pass http://www.baidu.com;
        }

Then add the server address and port in front of the corresponding address in the configuration file, eg: http://www.baidu.com/gismap/…

vue.config.js introduces configurable variables

1. Create a package-free configuration file

Create a new config.js configuration file under the public folder for cli3+, and create a new one under the static folder for versions below cli3.

//其他配置文件调用
const urlConfig = {
    
    
    ip: "localhost", //前端IP地址
    port: 3000, //前端地址端口号
    baseURL: 'http://localhost:3000', //前端地址，端口号和上面保持一致
    webApiURL: 'http://localhost:7501', //访问的后端接口地址
    authorityURL: "http://localhost:7502", //Oauth单点登录地址
    version: 'V1.0', // 首页底部版本号、
    reloadTime: '10000' //  页面数据重载 (毫秒)
}

//vue.config.js调用
module.exports = urlConfig

2. Introduce in vue.config.js

const urlConfig = require('./public/config');
const webApiURL = urlConfig.webApiURL; //访问的后端接口地址

3. Introduce the configuration file in index.html in the public directory

<script src="config.js" charset="utf-8"></script>

After configuration, other pages under the project can be directly referenced