记录axios响应慢的问题以及vue跨域和nginx跨域区别

当我没有打开后端服务时，我去yarn serve运行前端项目
当然是请求不到数据的，但是他的请求时间居然很长才得到响应。

即使我在这里设置超时时间也没用

// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 3000 // 请求超时时间
})

尝试将vue.config.js里的跨域配置注释掉

'/api': {
  target: 'http://10.34.37.58:8080',
  ws: false,
  changeOrigin: true,
  pathRewrite: {
      '^/api': ''
  }
}

ok，就解决了，原来他一直都在尝试将请求代理到目标主机，阻塞在这里。

vue.config.js 跨域配置

devServer的proxy是为了简化开发环境下的跨域请求配置。
Vue配置的代理仅在本地开发下有效，部署之后在生产环境是无效的。

  devServer: {
    port: 8000,		// development server port 8000
    proxy: {
      '/api': {
        target: 'http://10.34.37.58:8080',
        ws: false,				// if proxy websockets.
        changeOrigin: true,		// Default: false - changes the origin of the host header to the target URL.
        pathRewrite: {			// Rewrite target's url path. Object-keys will be used as RegExp to match paths.
            '^/api': ''			// 将路径中的 '/api' 消去
        }
      }
    }
  }
实际作用:(将 '/api' 前面的路径进行代理重写, 并消去 '/api' )
将请求: http://localhost:8000/api/role/list
代理到: http://10.34.37.58:8080/role/list

nginx 跨域配置

配置devServer不能解决生产环境跨域问题。它解决的是开发环境的跨域问题。

devServer只是一个webpack插件，只能用于开发环境。
使用webpack-dev-server(简称wds)进行开发时，wds启动了一个运行在node上的web服务器，此时开发环境访问对应的端口时，浏览器返回的vue页面是wds处理后的结果。
devServer的proxy是为了简化开发环境下的跨域请求配置。当发现符合在devServer proxy中配置好的请求格式时，将该请求拦截下来，由自己去请求服务器获取响应，然后把该响应返回给前端页面，即相当于一个传话筒。(正向代理）
编译打包后，前端页面成为了单独的静态资源，wds被抽离出去了。但是资源要被访问，那必然还是需要有另一个web服务器来装载它，这个服务器常见的就是nginx。

# nginx 跨域配置
location /prod-api/ {
	proxy_set_header Host $http_host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header REMOTE-HOST $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_pass http://192.168.31.101:8080/;
}

npm run serve

npm run serve实际上会执行vue-cli-service serve，该文件位于.bin\vue-cli-service.cmd，查看该文件，发现最终会执行node vue-cli-service.js serve（该文件位于@vue\cli-service\bin\vue-cli-service.js）。
vue-cli-service.js就是我们的切入口。
关键代码：

const Service = require('../lib/Service')
//...
const service = new Service(...
//...
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

实际执行的文件为serve.js(该文件位于@vue\cli-service\lib\commands\serve.js）
关键代码：

const WebpackDevServer = require('webpack-dev-server')
//...
const webpackConfig = api.resolveWebpackConfig()
//...
const compiler = webpack(webpackConfig)
const server = new WebpackDevServer(compiler, ...
//...
server.listen(port, host, err => {
  if (err) {
    reject(err)
  }
})

serve.js中使用webpack-dev-server作为http服务器，启动并监听端口提供服务。
vue.config.js的配置会作用到webpack-dev-server上。
devServer_proxy
devServer的proxy打包后失效