脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 axios跨域请求

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项目Network: unavailable的问题及解决

    vue项目Network: unavailable的问题及解决

    这篇文章主要介绍了vue项目Network: unavailable的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • vue3的内置组件汇总

    vue3的内置组件汇总

    本文主要介绍了vue3的内置组件汇总,详细的介绍了Fragment,Teleport,Suspense三个组件的使用,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • 如何在Vue 3中扩展Vue Router链接详解

    如何在Vue 3中扩展Vue Router链接详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要给大家介绍了关于如何在Vue 3中扩展Vue Router链接的相关资料,需要的朋友可以参考下
    2021-06-06
  • 区分vue-router的hash和history模式

    区分vue-router的hash和history模式

    这篇文章主要介绍了区分vue-router的hash和history模式，帮助大家更好的理解和学习vue路由，感兴趣的朋友可以了解下
    2020-10-10
  • vue 更改连接后台的api示例

    vue 更改连接后台的api示例

    今天小编就为大家分享一篇vue 更改连接后台的api示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 在Vue中使用JSONP进行跨域数据传输的完整指南

    在Vue中使用JSONP进行跨域数据传输的完整指南

    本文将介绍JSONP（JSON with Padding）的原理和用法，以及如何使用JSONP进行跨域数据传输，详细解释JSONP的工作原理，并提供前端和后端的代码示例，帮助你理解和实践JSONP跨域请求,需要的朋友可以参考下
    2023-06-06
  • Vue实现手机计算器

    Vue实现手机计算器

    这篇文章主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • vue使用vue-i18n实现国际化的实现代码

    vue使用vue-i18n实现国际化的实现代码

    本篇文章主要介绍了vue使用vue-i18n实现国际化的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue3利用vue-plugin-hiprint插件实现无预览打印功能

    Vue3利用vue-plugin-hiprint插件实现无预览打印功能

    在MES管理系统中需要实现条码数据从接口返回后,直接调用打印机进行打印,跳过浏览器的预览确定那一步,在尝试很多JS的方式和插件后,都无法实现该功能,所以本文介绍了Vue3如何利用vue-plugin-hiprint插件实现无预览打印功能,需要的朋友可以参考下
    2025-04-04
  • vue鼠标hover(悬停)改变background-color移入变色问题

    vue鼠标hover(悬停)改变background-color移入变色问题

    这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10

最新评论