前端端口号为8080,后台端口号为8010,在vue中通过axios,对同一局域网下的后台进行前后端交互,代码为axios.get('http://192.168.43.225:8010/pmsservice/admin/getAllAdmin').then( response => { console.log('请求成功了',response.data) }, error => { console.log('请求失败了',error.message) } ),报错为Network Error,是因为跨域问题吗,该怎么修改代码
时间: 2024-02-29 12:56:42 浏览: 132
是的,您遇到的问题很可能是跨域问题导致的。在浏览器中,如果前端JavaScript代码尝试从一个域名或端口号发送请求到另一个域名或端口号,那么浏览器通常会阻止这个请求,从而导致Network Error错误。
为了解决这个问题,您可以尝试在后端服务器中设置CORS头,或者在前端Vue应用程序中使用代理来发送请求。
方法一:在后端服务器中设置CORS头
在您的Node.js后端服务器应用程序中,您可以使用cors模块来设置CORS头。例如:
```javascript
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
// ...其他的路由和中间件
app.listen(8010, () => {
console.log('Server started on port 8010')
})
```
这里的`app.use(cors())`会将CORS头添加到所有的响应中,从而允许前端应用程序在8080端口上发送跨域请求。配置完成后,您可以在前端Vue应用程序中使用如下代码来发送请求:
```javascript
axios.get('http://192.168.43.225:8010/pmsservice/admin/getAllAdmin')
.then(response => {
console.log('请求成功了',response.data)
})
.catch(error => {
console.log('请求失败了',error.message)
})
```
方法二:在前端Vue应用程序中使用代理
在您的Vue应用程序的`vue.config.js`文件中,您可以使用代理来转发请求。例如:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://192.168.43.225:8010',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
这里的`/api`是您在Vue应用程序中发送请求的API路径前缀。`target`是您要代理的后端服务器的地址和端口号。`changeOrigin`设置为`true`意味着将请求头中的Host值设置为目标URL中的Host值。`pathRewrite`是用来重写请求路径的,这里的设置是将请求路径中的`/api`前缀替换为空字符串,以便正确匹配后端服务器的API路径。
配置完成后,您可以在前端Vue应用程序中使用如下代码来发送请求:
```javascript
axios.get('/api/pmsservice/admin/getAllAdmin')
.then(response => {
console.log('请求成功了',response.data)
})
.catch(error => {
console.log('请求失败了',error.message)
})
```
希望这些方法能够帮助您解决问题。如果您有任何其他问题,请随时问我。
阅读全文
相关推荐















