Vue+Node.js项目Axios GET请求报错但浏览器有响应

这是典型的**跨域资源共享(CORS)**问题。你的前端页面是直接通过本地文件系统打开的（协议为file://），而后端运行在http://localhost:3000（HTTP协议），两者的协议、域名/端口不满足浏览器的同源策略要求，因此浏览器会阻止JavaScript（也就是你的axios代码）获取跨域请求的响应——尽管请求本身已经成功发送并收到了数据，这就是为什么你能在网络面板看到正确响应，但代码里却捕获到Network Error的原因。

下面给你几个可行的解决方案：

方案一：后端添加CORS响应头 #

直接修改你的Node.js后端代码，在响应中添加允许跨域的头信息，让浏览器允许前端获取响应：

const HTTPServer = require("http")
// 注意这里要加const声明server，避免全局变量污染
const server = HTTPServer.createServer((req, res) => {
    // 添加CORS核心头，允许所有来源访问（生产环境建议替换为具体前端域名）
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 允许的请求方法
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    // 允许的请求头
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

    // 处理浏览器的OPTIONS预检请求（跨域复杂请求前会先发这个请求）
    if (req.method === 'OPTIONS') {
        res.writeHead(200);
        res.end();
        return;
    }

    console.log(req.url)
    console.log(req.method)
    res.write('Hello world!')
    res.end()
})
server.listen(3000, () => {
    console.log('Server is up')
})

修改后重启后端，再点击前端按钮就能正常获取响应了。

方案二：将前端页面托管到后端服务中 #

让前端和后端使用同一个域名和端口，从根源上避免跨域问题。你可以给Node.js添加静态文件服务能力，把前端HTML文件放到指定目录：

1. 在项目根目录创建public文件夹，把你的前端HTML文件放进去；
2. 修改后端代码：

const HTTPServer = require("http")
const fs = require('fs');
const path = require('path');

const server = HTTPServer.createServer((req, res) => {
    // 如果请求根路径，返回前端HTML文件
    if (req.url === '/' && req.method === 'GET') {
        const filePath = path.join(__dirname, 'public', 'index.html');
        fs.readFile(filePath, (err, content) => {
            if (err) {
                res.writeHead(500);
                res.end('Error loading index.html');
            } else {
                res.writeHead(200, { 'Content-Type': 'text/html' });
                res.end(content, 'utf-8');
            }
        });
    } else {
        // 处理其他API请求
        console.log(req.url)
        console.log(req.method)
        res.write('Hello world!')
        res.end()
    }
})
server.listen(3000, () => {
    console.log('Server is up')
})

3. 重启后端，访问http://localhost:3000打开前端页面，此时前端和后端同源，点击按钮就不会有跨域问题了。

方案三：使用Vue CLI的开发代理（适合正式Vue项目） #

如果你后续打算用Vue CLI搭建完整的Vue项目，可以在项目的vue.config.js中配置开发代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 把请求路径中的/api替换为空，转发到后端
        }
      }
    }
  }
}

然后前端的axios请求改成：

axios.get('/api')

这样开发时请求会被Vue CLI的开发服务器代理到你的Node.js后端，自动规避跨域问题。

内容的提问来源于stack exchange，提问作者gurk