Vue 请求数据报错，设置支持跨域请求，以及 2 种请求方法：Axios 和 Async/Await

前言

在前端开发中，尤其是在使用 Vue.js 开发单页应用（SPA）时，如何有效地请求和处理后端接口数据是每个开发者都必须掌握的基本技能。在实际开发过程中，很多开发者可能会遇到跨域请求问题、请求报错、返回数据格式错误等情况。为了解决这些问题，Vue 结合 Axios 或 Async/Await 提供了非常方便的 API 来简化开发流程。本文将介绍如何在 Vue 中进行数据请求，解决跨域问题，并使用两种常见的请求方式：Axios 和 Async/Await，帮助开发者更好地理解和使用这些工具。

Vue 请求数据常见错误

CORS 跨域问题

跨域问题（Cross-Origin Resource Sharing, CORS）是开发 Web 应用时常见的错误。当浏览器检测到当前网页发起的请求与当前网页的域名、协议或端口不一致时，浏览器会认为这是一个跨域请求。如果后端没有正确处理跨域请求，浏览器会阻止请求，从而导致报错。

常见的 CORS 错误信息如下：

Copy Code
Access to XMLHttpRequest at 'http://example.com/api' from origin 'http://localhost:8080' has been blocked by CORS policy.

解决 CORS 跨域问题

CORS 跨域问题通常可以通过以下几种方式解决：

使用代理解决开发环境跨域： Vue 项目可以通过 vue.config.js 配置代理来绕过浏览器的跨域限制。

在 vue.config.js 文件中添加以下内容：

javascriptCopy Code
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 后端 API 地址
        changeOrigin: true,            // 是否改变请求头中的 Origin 字段
        pathRewrite: { '^/api': '' }   // 重写路径，去掉 /api 前缀
      }
    }
  }
}

这样，当你在 Vue 中发送请求时，例如 http://localhost:8080/api/users，请求会被代理到 http://example.com/users。

服务器端支持 CORS：服务器端需要在响应头中添加 Access-Control-Allow-Origin 来允许跨域访问。

httpCopy Code
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

请求返回数据格式问题

另一个常见的错误是服务器返回的数据格式不正确。通常，服务器返回的数据应该是 JSON 格式，但有时由于后端设置错误或请求方式不当，可能会返回其他格式的数据，如 HTML 或纯文本。

解决方法：

检查服务器返回的内容类型：在开发者工具中查看响应的 Content-Type 是否是 application/json。

手动解析返回数据：如果后端返回的数据不是 JSON 格式，可以手动解析响应。例如：

javascriptCopy Code
axios.get('http://example.com/api')
  .then(response => {
    try {
      const data = JSON.parse(response.data);
      console.log(data);
    } catch (error) {
      console.error('JSON 解析失败', error);
    }
  })
  .catch(error => {
    console.error('请求失败', error);
  });

请求失败与错误处理

在实际开发中，请求失败可能是由于网络错误、超时、服务器错误等原因造成的。正确的错误处理机制对于提升用户体验至关重要。

错误处理基本思路：

检查 HTTP 状态码：根据返回的状态码判断请求是否成功。如果返回的是 4xx 或 5xx 状态码，表示请求失败，需要进行相应的错误处理。
处理超时和网络错误：使用 catch 或 try-catch 捕获异常，并根据异常类型显示不同的错误信息。

javascriptCopy Code
axios.get('http://example.com/api')
  .then(response => {
    console.log('请求成功', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器响应状态码不是 2xx
      console.error('服务器错误:', error.response.status);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('网络错误');
    } else {
      // 其他错误
      console.error('请求失败:', error.message);
    }
  });

设置支持跨域请求

开发环境下设置跨域

在开发环境中，最常见的做法是使用前端开发服务器的代理来解决跨域问题。Vue.js 使用 webpack-dev-server 作为开发服务器，它支持通过配置代理来解决跨域问题。

在 vue.config.js 中进行代理设置如下：

javascriptCopy Code
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',  // 后端服务器地址
        changeOrigin: true,             // 是否修改请求头中的 Origin 字段
        pathRewrite: { '^/api': '' }    // 重写路径
      }
    }
  }
}

生产环境下跨域处理

在生产环境中，跨域问题需要通过后端服务器来处理。常见的解决方案包括：

允许指定的源进行跨域请求：在服务器端设置 Access-Control-Allow-Origin 头部来指定允许跨域的源。
JSONP：在某些情况下，可以使用 JSONP 来解决跨域问题，但这种方法仅支持 GET 请求。
CORS 预请求：浏览器在发送某些类型的请求之前会先发起一个 OPTIONS 请求进行预检，服务器需要返回适当的 CORS 头部来允许跨域访问。

使用 Axios 进行请求

Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 中。它支持发送 GET、POST、PUT、DELETE 等 HTTP 请求，能够处理请求和响应的拦截器，并支持请求超时、取消请求、上传下载等功能。

Axios 请求基本使用

安装 Axios：

bashCopy Code
npm install axios

在 Vue 中使用 Axios 发起请求：

javascriptCopy Code
import axios from 'axios';

axios.get('http://example.com/api/users')
  .then(response => {
    console.log('请求成功', response.data);
  })
  .catch(error => {
    console.error('请求失败', error);
  });

Axios 错误处理

javascriptCopy Code
axios.post('http://example.com/api/login', {
    username: 'user',
    password: 'pass'
  })
  .then(response => {
    console.log('登录成功', response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('服务器错误:', error.response.status);
    } else if (error.request) {
      console.error('网络错误');
    } else {
      console.error('请求失败:', error.message);
    }
  });

使用 Axios 处理跨域

在使用 Axios 时，如果遇到跨域问题，可以通过设置 withCredentials 来解决跨域请求时携带 Cookies 的问题。

javascriptCopy Code
axios.get('http://example.com/api/users', {
  withCredentials: true  // 表示请求是否带上身份凭证（Cookies）
})
.then(response => {
  console.log('请求成功', response.data);
})
.catch(error => {
  console.error('请求失败', error);
});