Vue.js 中使用 Axios 发送 GET 和 POST 请求

在使用 Axios 发送请求之前，你需要先安装 Axios。你可以通过 npm 或 yarn 进行安装：

npm install axios
# 或者
yarn add axios

一、发送 GET 请求
发送 GET 请求相对简单。下面是一个使用 Axios 发送 GET 请求的例子：

import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

在这个例子中，我们使用 axios.get 方法发送一个 GET 请求到 https://api.example.com/data，然后在 .then 方法中处理响应数据。如果发生错误，我们会在 .catch 方法中捕获错误并打印出来。
二、发送 POST 请求
发送 POST 请求与发送 GET 请求类似，只是需要使用 axios.post 方法。下面是一个使用 Axios 发送 POST 请求的例子：

import axios from 'axios';
axios.post('https://api.example.com/data', { name: 'John', age: 30 })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

在这个例子中，我们使用 axios.post 方法发送一个 POST 请求到 https://api.example.com/data，并在请求体中包含一个对象 { name: 'John', age: 30 }。然后，我们同样在 .then 方法中处理响应数据，并在 .catch 方法中捕获错误。
三、处理跨域请求问题
如果你在开发过程中遇到了跨域请求问题，可能是由于浏览器的同源策略导致的。解决这个问题的方法有几种：

1. 在服务器端设置 CORS（跨来源资源共享）头部信息，允许来自特定源的请求。这需要在服务器端进行配置。具体的配置方法取决于你使用的服务器端技术。例如，如果你使用的是 Express.js，你可以使用 cors 中间件来设置 CORS 头部信息。
2. 使用代理服务器。在开发环境下，你可以配置 Vue CLI 项目使用代理服务器来绕过跨域问题。在 Vue CLI 项目根目录下找到 .env 文件，设置 VUE_APP_API_BASE_URL 和 VUE_APP_API_BASE_URL_PROXIED 环境变量。然后，在 vue.config.js 文件中配置代理规则。这样，当你向 VUE_APP_API_BASE_URL 发起的请求将被代理到 VUE_APP_API_BASE_URL_PROXIED。在生产环境下，你可能需要将代理服务器部署到你的服务器上。
3. 使用 JSONP。JSONP 是一种通过动态创建 <script> 标签来绕过同源策略的方法。但是，JSONP 只支持 GET 请求，并且存在安全风险。因此，建议优先考虑使用 CORS 或代理服务器来解决跨域问题。