vue cli4 解决跨域问题后用localhost可以访问使用ip地址无法被解析导致请求路径出
时间: 2023-11-03 09:02:55 浏览: 176
vue解决跨域问题(推荐)
在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地址访问接口无法解析导致请求路径出错的问题。
阅读全文