vue--跨域配置

首先要在main.js中引入axios:

//引入axios
import axios from 'axios';
//注册
Vue.prototype.$axios = axios;

和main.js同级别有个vue.config.js,在这里面进行配置:

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  
  devServer:{
    
    
    proxy:{
    
    
      '/api': {
    
    
        target: 'https://data.weatherat.com', // 接口的域名
        pathRewrite: {
    
    '^/api': ''}
        }
    },

  }
})

使用:

<template>
    <div>
        <h3>跨域</h3>
    </div>
</template>

<script>
export default {
    
    
    created(){
    
    
        this.$axios.post("/api/live/getPopularCityInfo")
        .then(res=>{
    
    
            console.log(res.data);
        })
    }
}
</script>

<style>

</style>

效果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44239550/article/details/128657682