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

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

这个是我请求的地址

这个是我这边的报错

这个是vue.config配置

阅读 9.7k
7 个回答

首先你得了解 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 上配置转发即可。

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

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

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

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

新手上路,请多包涵

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

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

http-server --proxy https://custom-host
推荐问题
宣传栏