请求数据及跨域

App.vue

<script>
import store from "./store";
import Home from "./views/Home.vue";
export default {
  provide:{
    store
  },
  components:{
    Home
  }
}
</script>

<template>
<Home/>
</template>

<style>

</style>

Home.vue

<template>
  <div>
    <h2>{{store.state.msg}}</h2>
    <button @click="updateMsg">改变msg</button>
    <img :src="imgData" alt="" @click="changeMsg">
  </div>
</template>

<script>
import store from "../store/index.js";
import axios from "axios";

export default {
  data(){
    return{
      bannersResponse:{
      },
      imgData: ""
    }
  },



  inject:['store'],
  created() {
    this.changeMsg();
  //   axios:基于promise的http库

  },
  methods:{
    updateMsg(){
      this.store.updateMsg();
    },

    changeMsg(){
      // axios.get("http://192.168.0.111:4523/m1/868157-0-default/GetCaptcha").then((res)=>{
      //   if (res.data.meta.status == '2000'){
      //     this.bannersResponse = res.data.data ;
      //     this.imgData = this.bannersResponse.img;
      //   }
      //   console.log(res)
      // })

      axios.get("/path/horn/v1/modules/lx-web-config/prod?_lxsdk_rnd=185b0662bf30").then((res)=>{

        console.log(res)
      })

      //
      // 跨域请求数据，浏览器同源策略的保护机制，通过proxy实现跨域请求数据
      // axios.get("/path/api/mmdb/movie/v3/list/hot.json?ct=%E5%8C%97%E4%BA%AC&ci=1&channelId=4").then((res)=>{
      //
      //   console.log(res)
      // })

    //
    }
    // changeMsg(){
    //   fetch('http://192.168.0.111:4523/m1/868157-0-default/GetCaptcha').then((res) =>{
    //     // json()将响应的body，解析json的promise
    //     return res.json()
    //   }).then((res) =>{
    //     if (res.meta.status == '2000') {
    //       this.bannersResponse = res;
    //       this.imgData = this.bannersResponse.data.img;
    //     }
    //   })
    // },
  }
}
</script>

index.js

//数据实现响应式
//ref reactive ——>对象中存储着状态msg,age,counter
import {reactive} from "vue";
const store={
    state:reactive({
        msg:"helloworld!"
}),
    updateMsg(){
        this.state.msg="你好"
    }
}

export default store
//如何在APP组件通过provide提供

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{  //中转服务器
    proxy:{  //通过代理实现跨域
      // https://portal-portm.meituan.com
      '/path':{
          target:' https://portal-portm.meituan.com',  //替换的服务端地址
          changeOrigin:true,  //开启代理，允许跨域
          rewrite:path => path.replace(/^\/path/,'')  //设置重写路径
        }
      // '/path':{
      //   target:'https://i.maoyan.com',  //替换的服务端地址
      //   changeOrigin:true,  //开启代理，允许跨域
      //   rewrite:path => path.replace(/^\/path/,'')  //设置重写路径
      // }
    }
  }
})

跨域请求

 server:{  //中转服务器
    proxy:{  //通过代理实现跨域
      // https://portal-portm.meituan.com
      '/path':{
          target:' https://portal-portm.meituan.com',  //替换的服务端地址
          changeOrigin:true,  //开启代理，允许跨域
          rewrite:path => path.replace(/^\/path/,'')  //设置重写路径
        }
	}
}