---

< H1 > problem description < / H1 >

now there is a need for vue+webpack when developing, the dev environment access address is http://localhost:8080/

.

now you need to access the specified domain name ( for example, https://hsp.com)

but the expected results are the same as those shown by http://localhost:8080/;

or:

in the browser url, access to https://hsp.com is to access http://localhost:8080/

< hr > < H1 > the environmental background of the problem and what methods you have tried < / H1 >

• change hosts

  it is not convenient to change hosts because an address is already occupied:

  192.168.1.*** hsp.com

• use vase or fiddler for proxy interception

  because vue+webpack is in the dev environment, the actual result of local mapping access is not consistent with the expected result.

• set proxy
  the current proxy settings are as follows:

  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/agent': {
        target: 'http://hsp.com', // 
        changeOrigin: true,
        pathRewrite: {
          '^/agent': ''
        }
      }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader-sharpsourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

< hr >

(2018-11-26) reorganize the language and explain the background:

-it is not convenient for sharp to change hosts because an address is already occupied:

the api interface specified in the backend is 192.168.1.*/api/

so it has been set to 192.168.1.* hsp.com

in hosts.

then why access to http://hsp.com is to access the requirement of http://localhost:8080/,

because the api encryption measure set at the background stipulates that the address of api must be the same as the domain requesting api, including Authorization is also based on this encryption:

that is to say, http://hsp.com request http://hsp.com/api this is allowed

(writing a business trip in the background, it is impossible to change it in a short time)

< hr >

(2018-11-26) preliminary solution:

PS: some children's shoes say that they can be set directly in webpack proxyTable , but I haven't found the official document method for a long time, and some friends who understand it also want to mention it.

-sharp uses the vase (Charles) remote mapping (proxy) local port to map the specified domain name to the native localhost:

hosts 192.168.1.*** hsp.com ,
http://hsp.com localhost:8080 , http://hsp.com , , http://hsp.com/_backend , :

, ~ !

ok , localhost:8080 , hsp.com/_backend

---

---

hosts , :

SwitchHosts...
vpnhostsnginxvpn

---

hostip

---

you can configure it directly on dev using IP Preview

---

I don't know if I misunderstand

in the browser url, accessing https://hsp.com means visiting http://localhost:8080/

to achieve this effect, you only need to match the host file, that is,

127.0.0.1 hsp.com

if you only need a proxy interface and do not proxy url requests, you may need to design a proxy to determine whether the request is html, and point the proxy address to the specific ip and port of hsp.com. If the real ip of hsp.com is 1.1.1.1 and the port is 80, then the webpack-dev-server code is as follows:

devServer: {
    hot: true,
    compress: false,
    historyApiFallback: true,
    open: true,
    host: '0.0.0.0',
    port: 8080,
    disableHostCheck: true,
    stats: { colors: true },
    headers: { 'Access-Control-Allow-Origin': '*' },
    proxy: {
      '**': {
        target: 'http://1.1.1.1:80',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf("html") !== -1) {
            return "/index.html";  // html
          }
        }
      }
    }
  },