vue请求数据报错，设置支持跨域请求，以及2种请求方法axios或者async与await

设置跨域

通过vite创建的项目，一般会在你项目文件中自动生成一个名为vite.config文件，点击添加支持跨域的代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server: {hmr: {overlay: false},proxy: {'/api':{target: 'http:你请求数据的ip地址',changeOrigin: true,rewrite: (path)=> path.replace(/^\/api/,'')}}}
})

通过vue-cli脚手架工具创建项目，设置跨域时，在vue.config.js中添加支持跨域代码，若无此文件手动创建

module.exports = {devServer: {proxy: {'/api': {target: 'http://你请求数据的ip地址',changeOrigin: true,pathRewrite:{'^/api':''}}}}
}

异步请求的2中方式

axios请求

// 先安装需要用到的库
npm install axios

接下来通过案例演示请求过程

// 在script标签中
<script>// 导入环境所需要的环境依赖import { onMounted } from 'vue'import axios from 'axios'export default{setup(){onMounted(()=>{// 设置请求头，相当于请求数据的钥匙,在不同的请求场景中，请求头的内容各有不同，并且有的不需要设置请求头let ps = {start: "2015-01-01",end: "2016-12-31"};axios.post('/api/数字ip地址后面的内容',ps).then((res)=>{let MyData = res.data.results// 打印一下是否请求成功console.log(MyData)})})}}
</script>

在这里插入图片描述

通过自带的async和await来请求数据

'application/json' 是一种 MIME 类型（也称为内容类型，Content-Type），用于告诉服务器或客户端，发送或接收的数据是 JSON 格式。

// 在script标签中
<script>// 导入环境所需要的环境依赖import { onMounted } from 'vue'import axios from 'axios'export default{setup(){onMounted(async()=>{// 设置请求头，相当于请求数据的钥匙,在不同的请求场景中，请求头的内容各有不同，并且有的不需要设置请求头// 定义请求头let ps = {'start': '2015-01-01','end': '2016-12-31'}const respone = await fetch('/api/hospitals', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(ps),})const res = await respone.json()let mydata = res.resultsconsole.log(mydata)})})}}
</script>

在这里插入图片描述