解决不能通过IP地址访问VUE项目的问题

解决不能通过IP地址访问VUE项目的问题

问题背景

目前项目是前后端分离的,VUE+SpringBoot,我拷贝下来前端项目在自己机器上运行,能通过localhost+端口号访问,但不能ton过IP地址访问

问题解决

上网找了很多资料,一开始以为是自己后端Java项目的问题,甚至在考虑tomcat的配置,可是tomcat是框架或编译器自带的,并不好修改.
后来发现应该是前端项目的问题,搜索了一下果然找到了问题根源

只需要在VUE项目中的package.json文件中修改
scripts:dev属性即可,
在属性后面添加 --host 0.0.0.0

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

再次尝试,即可通过localhost访问.也可通过IP地址访问

Vue CLI 4中解决跨域问题后,可以通过localhost访问接口,但使用IP地址无法被解析,导致请求路径出错的问题,可能是由于以下原因导致的: 1. 浏览器的同源策略:同源策略要求请求的协议、域名、端口均相同。使用localhost访问时,请求的协议、域名和端口均为相同的localhost,符合同源策略,因此能够正常访问接口;而使用IP地址访问时,与localhost的域名不同,不符合同源策略,浏览器会拦截请求。 2. API配置问题:可能在Vue项目中配置了跨域请求时,只允许localhost的请求通过,而将IP地址没有添加到允许列表中,导致请求路径出错。 解决问题的方法如下: 1. 配置vue.config.js:在Vue项目的根目录下找到vue.config.js文件,如果没有则手动创建。在该文件中,添加devServer选项,设置proxy代理,将需要访问的API接口的域名和端口添加到proxy的target中,示例代码如下: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 需要访问的API接口的域名和端口 ws: true, changeOrigin: true } } } }; ``` 2. 使用IP地址访问:在Vue项目中,使用IP地址访问API接口时,将请求路径改为相对路径,如`/api/getData`,而不是绝对路径`http://localhost:8080/api/getData`。这样配置后,不论使用localhost还是IP地址访问,请求都会通过proxy转发到正确的接口地址。 通过以上操作,可以解决Vue CLI 4中使用IP地址访问接口无法解析导致请求路径出错的问题
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值