首先找到“天聚数行”注册找到免费 api ,用户登录 - 天聚数行TianAPI，选中了一个头条热门新闻调试接口，里边有请求地址和请求参数，还有请求信息和相应的结果。
然后在 api 文件夹的 user 文件中编写请求信息。（注意，请求参数是虽然写在 params中，但是实际上是以 ？key= 的形式拼接到 请求的 URL 中。）
如果是要搜索之类的，那就是要到 vue 页面中给调用的 api文件夹中的 请求函数传递过去参数，这就是携带参数，然后该参数作为形参传递到 params中，并拼接到 要请求的URL 中，进行关键搜索。
配置 axios ，并配置相应的请求拦截器和响应拦截器
注意 ： 虽说在 vue 中返回的数据直接是 response ，但是在响应拦截器中返回的是 response.data
vue页面进行请求 :
这里请求返回的结果直接是 response而不是 response.data,莫混
跨域问题：可能会存在
跨域问题是由浏览器的 同源策略（Same-Origin Policy）引起的。同源策略要求：
前端页面（如
http://localhost:8080）只能向 同源 的后端 API 发起请求。同源 的定义是：协议（
http/https）、域名（example.com）和端口（8080）必须完全相同。如果前端页面和后端 API 的协议、域名或端口不一致，浏览器会阻止请求，并抛出跨域错误。
免费 API 的跨域问题：
如果你使用的是第三方免费 API（如
https://apis.tianapi.com），这些 API 通常会配置 CORS（跨域资源共享），允许特定的前端域名访问。如果 API 没有正确配置 CORS，浏览器会阻止请求。
判断是否跨域
跨域的定义是：协议、域名或端口 三者中任意一个不同，就会触发跨域问题。
前端页面：
http://localhost:5173/drink
协议：
http域名：
localhost端口：
5173后端 API：
https://apis.tianapi.com/topnews/index
协议：
https域名：
apis.tianapi.com端口：
443（https默认端口）结论：
协议不同：
httpvshttps域名不同：
localhostvsapis.tianapi.com端口不同：
5173vs443因此，前端页面和后端 API 是跨域的。
方法 ：使用代理服务器
通过代理服务器转发请求，将前端页面和后端 API 的域名统一为
localhost，从而避免跨域问题。配置 Vue CLI 代理：
1.在vite.config.js（Vite 项目）或vue.config.js（Vue CLI 项目）中添加代理配置。
Vite 项目：
// vite.config.js import { defineConfig } from 'vite';export default defineConfig({server: {proxy: {'/api': {target: 'https://apis.tianapi.com', // 后端 API 地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''), // 移除路径中的 /api},},}, });2.修改前端请求路径：
将请求路径改为/api，代理服务器会自动将请求转发到https://apis.tianapi.comrequest.get('/topnews/index', {params: { key: '3bf88bb80ec4f87148005b202db4d15d' }, })3.重启开发服务器：
修改配置文件后，重启开发服务器（如
npm run dev或yarn dev）。
如果是在 vite.config.js中配置了 server ，其中rewrite中说了要移除地址，并且在utils的 request中已经定义了要请求的基地址也就是协议域名， 那么在 api中请求时基于基地址还要去掉 替换 基地址 的 /api ，那么就是 /topnews/index 。
如果没有跨域问题，那么直接 请求地址写全，或者 /topnews/index 这样也可。
