Vue3 配置Axios的referer 请求头

Vue3 配置Axios的referer 请求头

vue文件

<template>
  <div class="">
    <h1 id="msg">{{ msg }}</h1>
<button @click="abc">点击</button>
<button @click="getXiaoMi">getXiaoMi</button>
<button @click="getCaiYunApp">caiyun</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'CaiYun',
  props: {
  },
  data() {
    return {
      msg: "Hi~~",
      number: 0
    }
  },
  methods: {
    add() {
      console.log('add回调被调用了')
      this.number++
    },
    abc() {

      axios({
        method:'post',//post提交
        url:'/dump/coderkk',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'//设置from表单提交
        },
        data: { //表单数据（一般post）
          'client_id': '180100031051',
          'channel_id': '0',
          'webp': '1',
          'page_type': 'home'
        },
        params: { //路径拼写的数据（一般get）
          // 'client_id': '180100031051',
          // 'channel_id': '0',
          // 'webp': '1',
          // 'page_type': 'home'
        }
      }).then(data => {
        console.log(data)
      })

    },
    getXiaoMi(){
      axios({
        method:'post',//post提交
        url:'/xiaomi/v1/home/page',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'//设置from表单提交
        },
        data: { //表单数据（一般post）
          'client_id': '180100031051',
          'channel_id': '0',
          'webp': '1',
          'page_type': 'home'
        },
        params: { //路径拼写的数据（一般get）
          // 'client_id': '180100031051',
          // 'channel_id': '0',
          // 'webp': '1',
          // 'page_type': 'home'
        }
      }).then(data => {
        console.log(data)
      })
    },

    getCaiYunApp(){
      axios({
        method:'get',//get
        url:'caiyun/v2.5/UR8ASaplvIwavDfR/116.4182,40.0406/weather?lang=zh_CN&dailystart=0&hourlysteps=4&dailysteps=4&alert=true',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'//设置from表单提交
        },
        params: { //路径拼写的数据（一般get）
          // 'client_id': '180100031051',
          // 'channel_id': '0',
          // 'webp': '1',
          // 'page_type': 'home'
        }
      }).then(function (response) {
        let forecast_keypoint = response.data.result.forecast_keypoint
        console.log(forecast_keypoint)
        document.getElementById("msg").innerText = forecast_keypoint;
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//关闭语法检查
    //开启代理服务器（方式二）
  devServer: {
    proxy: {
/*
      '/api1': {
        target: 'http://localhost:5000',
        pathRewrite: { '^/api1': '' },
        // ws: true, //用于支持websocket,默认值为true
        // changeOrigin: true //用于控制请求头中的host值,默认值为true
      },
*/
       '/xiaomi' : {
          target : 'https://m.mi.com',// 需要代理的地址
          changeOrigin: true,//是否跨域
          secure: false, // 如果是https接口，需要配置这个参数
          pathRewrite: {//重写接口地址
            '^/xiaomi': ''
          },
          headers: {//header设置
            referer: 'https://m.mi.com/',//referer
            origin: 'https://m.mi.com/'
          }
        },
        '/caiyun' : {
          target : 'https://api.caiyunapp.com',// 需要代理的地址
          changeOrigin: true,//是否跨域
          secure: false, // 如果是https接口，需要配置这个参数
          pathRewrite: {//重写接口地址
            '^/caiyun': ''
          },
          headers: {//header设置
            referer: 'https://api.caiyunapp.com/',//referer
            origin: 'https://api.caiyunapp.com/'
          }
        }
      }
  }
})