当我没有打开后端服务时,我去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打包后失效