用vue进行build打包后，http-server进行启动dist的文件，然后发现无法获取接口的数据

Question

网页可以正常打开的，就是无法获取接口的数据,接口返回404，已排除跨域问题，后端接口是放开了所有ip都可以访问得到数据的

这个是我请求的地址

这个是我这边的报错

这个是vue.config配置

Answer 1

首先你得了解 devServer 配置的是什么。

我们使用 npm run dev 进入调试模式的时候， 我们本地将会启动一个 http 服务，这个服务是用 node.js 启动的，因此我们可以在本地访问我们写的 web 页面。

当 web 页面中的 ajax 访问某一个接口的时候，如果不写类似 http://xxx/ 开头的话，就意味着访问本地服务，也就是 node.js 开启的服务，但是我们的真实服务并不是 node.js ，而是后端开启的另外的服务，因此我们需要配置 node.js 服务将这些请求代理转发给后端真实接口。

所以我们在 vue.config.js 中配置的 devServer 就是为了配置node.js 服务的，告诉他遇到 api 开头的请求转发到 http://xxx。

那么最后就是打包之后了，当项目打包之后，你会发现项目变成静态页面了，我们会把页面打包部署到类似 nginx 上，也就是没有 node.js 作为页面的呈现服务了，那么配置的 devServer 当然也没法有效了，但原理还是一致的，最后只需在 nginx 上配置转发即可。

Answer 2

你都已经是打包后了 devServer 都不会启动了，这块的转发配置也就不会生效了
那么你的接口请求，要不本地再跑一个接口服务，要不再本地跑个穿透转发

Answer 3

看下network里面的请求url，如果请求的本地，那么就是不对的，vue.config.js里面的proxy只有在dev模式才好用。

Answer 4

看你proxy代理的时候有重写将'/api'写成''，还有请求端端口为8080，看配置后端端口应该是3000。打包后devServe里的配置是不会生效的，那么你要检测路径和端口是否正确，所以要区分打包前后的路径和请求端口是否一致。

Answer 5

建议使用nginx做一次转发，proxy只在开发环境下生效。
详情可参考这个vue 跨域

Answer 6

请求代理关键字/api在你实际请求的接口中都没有，肯定报404嘛

Answer 7

原因上面已经说得很清楚了，我说一下如何解决吧，http-server 是支持开启代理的，将本地所有请求转发到指定的服务

http-server --proxy https://custom-host