关于VUE3跨域请求(借助proxy)

通过前端解决跨域问题的记录：

1.axios的引入:

• step1 使用npm安装axios 

npm install axios

• step2 在main.js文件中配置config

//1.首先引入axios
import axios from "axios";


//2.设置axios请求的地址默认是'/api',这样根据第一步中配置的会将/api替换为vue.config.js中的target地址
axios.defaults.baseURL = '/api';


//3.全局配置axios
app.config.globalProperties.$axios=axios;

• 如何使用全局对象(补充)

const app = createApp(App);
app.config.globalProperties.$user = {
    name: '猪猪侠',
    weapons: '嘴巴',
    title: '最强喷子'
}
app.config.globalProperties.$axios=axios;


//在template模板中使用
<span> {{ $user.name }} </span>


//在setup中使用


//第一种方式
const const currentInstance = getCurrentInstance();
const $axios = currentInstance.appContext.config.globalProperties.$axios;
$axios.get('请求地址',{
    param:{
        name:'猪猪侠',
    }
  }).then((res)=>{
    //此处对响应的数据按需处理

 }).catch((err)=>{
    
    //报错时
})



//第二种方式
const {proxy} = getCurrentInstance();
proxy.$axios.get('请求地址').then((res)=>{
    
})

• step3 配置ue.config.js文件 如果文件中有vue.config.js文件则打开，若没有新建一个

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
      devServer: {
        proxy: {
          "/api": {//当遇到/api时，则换成https://buff.163.com
            target:"https://buff.163.com",//请求地址
            changeOrigin:true,// 这个参数可以让target参数是域名
            ws: false,//是否启用websockets，用不到可设为false
            secure: false,// 如果是https接口，需要配置这个参数
            pathRewrite: {//对路径匹配到的字符串重写
              "^/api": "",
            },
          }
        }
     } 
  }
})

• step4 在script中使用axios发送请求

$cookie.set('session','1-HoYT5WpcLtR9f-FI2xSpPc22ozBuMr3WEbT7-XQvXfGL2038862383');  
$axios.get('/api/market/goods',{
    params:{
      game:'csgo',
      page_num:pageNum.value,
      category:val,
      use_suggestion:0,
      _:timeStamp
    },
  }).then(res =>{
    if(res.code === 'OK'){
      console.log('ok :>> ');
    }
  }).catch((err) =>{
    console.log('err :>> ', err);
  })