Vue3 网络请求

CORS问题

同源：指的是当前用户所在的URL与被请求的URL的协议名、域名、端口必须完全相同。一旦有一个或多个不同，就是非同源请求，也就是我们经常说的跨域请求，简称“跨域”。

同源策略：是浏览器的一个安全策略，只不允许部分跨域请求，如 Ajax 请求就受到同源策略限制。但常见的<img>、<link>、<script> 标签发出的跨域请求，是不受同源策略限制的，也就是它们发送跨域请求，浏览器会正常处理响应，而AJAX发送跨域请求，浏览器就不会正常处理响应。

在 Vue 中通常配置代理服务器解决Ajax跨域问题。

代理服务器原理：浏览器发送同源请求，由代理服务器将请求转发到跨域的目标服务器上，代理服务器得到响应后，自动传递给浏览器。

解决方式：

配置 vite.config.js 文件：

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";export default defineConfig({plugins: [vue()],server: {// 处理CORSproxy: {// 处理“/path”前缀的路径"/path": {// 替换目标接口target: "https://www.wanandroid.com",// 表示开启代理，允许跨域changeOrigin: true,// 重写路径，删除"/path"rewrite: (path) => path.replace(/^\/path/, ""),},},},
});

ajax

AJAX 即 “Asynchronous JavaScript and XML”（异步的 JavaScript 和 XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页数据的技术。

<script setup>
import {ref} from "vue";
import axios from "axios";const url = "/path/banner/json";function ajax(url) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open("GET", url);xhr.onreadystatechange = () => {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.responseText));} else {// 请求失败reject(new Error(`请求失败：${xhr.status} - ${xhr.statusText}`));}}};xhr.send();});
}function handleAjax() {requestTool.value = "ajax";list.value = [];ajax(url).then((res) => {list.value = res.data;}).catch((err) => {alert(err.message);});
}const list = ref([]);
const requestTool = ref("ajax");</script><template><h1>网络请求</h1><p> {{ requestTool }} </p><button @click="handleAjax">ajax</button><ul><li v-for="item in list" :key="item.id"><span>{{ item.title }}</span><img style="width: 150px;" :src="item.imagePath" alt=""></li></ul>
</template>

fetch

Fetch 是一种现代的 JavaScript API，用于在 Web 应用中进行网络请求，它提供了一种更简洁、灵活的方式来处理 HTTP 请求和响应，是对 XMLHttpRequest 的一种替代方案。

Fetch 基于 Promise 实现，使用原生的 JavaScript 语法来发送请求和处理响应。它返回一个 Promise 对象，该 Promise 会在请求完成后被 resolve 或 reject，使得异步操作的处理更加直观和易于管理。

function handleFetch() {requestTool.value = "fetch";list.value = [];fetch(url).then(res => res.json()).then((res) => {list.value = res.data;}).catch((err) => {alert(err.message);});
}

axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它提供了更便捷的方法来发送 HTTP 请求，并对请求和响应进行拦截、处理等操作，是在 JavaScript 项目中进行网络请求的常用库。

Axios 内部基于 XMLHttpRequest（在浏览器环境）或 http 模块（在 Node.js 环境）来发送请求，通过 Promise 来处理异步操作，同时提供了丰富的配置选项和拦截器机制，方便对请求和响应进行统一处理。

function handleAxios() {requestTool.value = "axios";list.value = [];axios.get(url).then(res => {list.value = res.data.data;}).catch((err) => {alert(err.message);});
}