当前位置：首页 > article >正文

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

article 2024/11/16 2:01:45

设置跨域

通过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.results
        console.log(mydata)
                })
            })
        }
    }
</script>

在这里插入图片描述