vue3之axios跨域请求问题及解决

更新时间：2023年09月26日 09:58:35 作者：fresh_nam

这篇文章主要介绍了vue3之axios跨域请求问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

做前后端分离的网页开发时，难免会遇到跨域问题，这里解决使用axios请求的跨域问题。

一、版本

1.Vue：3.1.4

2.axios：0.21.1

二、问题

1.使用axios直接请求搜狗的图片接口

https://pic.sogou.com/napi/pc/searchList?mode=1&start=0&xml_len=48&query=美女

<template>
  <div class="about">
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "About",
  data(){
    return {
    }
  },
  created(){
    axios.get('https://pic.sogou.com/napi/pc/searchList',{
      params:{
          mode: 1,
          start: 0,
          xml_len: 48,
          query: '美女'
        }}).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

2.浏览器会报如下错误：

在这里插入图片描述

三、解决

这时候就需要配置代理了

1.在项目的根目录添加一个名字为vue.config.js的js文件：

在这里插入图片描述

2.在该文件里面写下如下代码：

module.exports = {
    configureWebpack:{
        resolve:{
        	// 给路径起别名
            alias:{
                'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views'
            }
        }
    },
    devServer:{
        proxy:{
            '/sougou':{
            	// 跨域的服务器地址
                target: 'https://pic.sogou.com/napi/pc/searchList',
                // 是否允许跨域
                changeOrigin: true,
                // 替换掉请求路径的/sougou为“”
                pathRewrite:{'^/sougou': ""}
            },
            }
        }
    }
}

3.使用

<template>
  <div class="about">
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "About",
  data(){
    return {
    }
  },
  created(){
    axios.get('/sougou',{
      params:{
          mode: 1,
          start: 0,
          xml_len: 48,
          query: '美女'
        }}).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

这次就不会报错：

在这里插入图片描述

注意：

每次更改vue.config.js后都要重启项目才能生效

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中emit事件无法触发的问题及解决
这篇文章主要介绍了Vue中emit事件无法触发的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue3项目中ESLint配置和使用
在用vite创建vue3项目时已经选择了添加ESLint,本文就来介绍一下ESLint在项目中需要怎样配置和使用,具有一定的参考价值,感兴趣的可以了解一下
2023-09-09
vue+elementUI显示表格指定列合计数据方式
这篇文章主要介绍了vue+elementUI显示表格指定列合计数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
如何在Vue项目中使用axios请求
这篇文章主要介绍了如何在Vue项目中使用axios请求，对Vue感兴趣的同学，可以参考下
2021-05-05
深入理解Vue的插件机制与install详细
这篇文章主要介绍的是深入理解Vue的插件机制与install，文章主要是讲解install函数可以做些什么、install内部是怎么实现的、 Vuex，Vue-Router插件在install期间到底干了什么,需要的小伙伴可以参考一下
2021-09-09
Vue组件的继承用法示例详解
这篇文章主要介绍了Vue组件的继承用法,本文通过实例代码案例讲解给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
Vue + Elementui实现多标签页共存的方法
这篇文章主要介绍了Vue + Elementui实现多标签页共存的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
vue+springboot实现登录功能
这篇文章主要为大家详细介绍了vue+springboot实现登录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue使用el-select下拉框匹配不到值的问题及解决
这篇文章主要介绍了vue使用el-select下拉框匹配不到值的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue数据驱动模拟实现2
这篇文章主要介绍了Vue数据驱动模拟实现的相关资料，实现Observer构造函数，监听已有数据data中的所有属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01