axios入门之基本使用

野性酷女 2024-03-24 16:36 115阅读 0赞

axios用来发请求，获取后端数据

自定义一个函数，

showdata(){
        
            axios.get("http://localhost:8080/selectAll").then(response=>{
        
              console.log(response)
            }).catch(error=>{
        
              console.log(error)
            })
          }

测试一下，报如下错误

Access to XMLHttpRequest at ‘http://localhost:9090/selectAll’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

因为没有配置跨域

在vue.config.js中加入如下代码，如果没有vue.config.js就在src目录下新建一个vue.config.js：

// 跨域配置
    module.exports = {
        
        devServer: {
                        //记住，别写错了devServer//设置本地默认端口  选填
            // port: 9876,
            proxy: {
                         //设置代理，必须填
                '/api': {
                      //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                    target: 'http://localhost:9090/',     //代理的目标地址
                    changeOrigin: true,              //是否设置同源，输入是的
                    pathRewrite: {
                           //路径重写
                        '/api': ''                     //选择忽略拦截器里面的单词
                    }
                }
            }
        }
    }

修改axios.get中的url

/api/selectAll

问题解决

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关 axios—安装以及基本使用

目录一、安装json-server 二、创建db.json文件三、启动json-server（浏览器测试访问get请求） --------------------

淩亂°似流年/ 2024年04月06日 13:18/ 0 赞/ 97 阅读

相关 axios的基本使用

axios的基本使用 Axios是什么？ -------------------- Axios是什么？ > Axios 是一个基于 promise 的 H

忘是亡心i/ 2024年04月01日 18:44/ 0 赞/ 114 阅读

相关 axios基本使用

axios基本使用简介 Axios，是一个基于promise 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在

Love The Way You Lie/ 2024年03月30日 17:40/ 0 赞/ 96 阅读

相关 axios入门之基本使用

axios用来发请求，获取后端数据自定义一个函数， showdata(){ axios.get("http://loca

野性酷女/ 2024年03月24日 16:36/ 0 赞/ 116 阅读

相关 Axios的基本使用

Axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特点支持浏览器和node.js 支持promi

水深无声/ 2023年10月18日 11:04/ 0 赞/ 134 阅读

相关 axios基本使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

喜欢ヅ旅行/ 2023年06月17日 09:54/ 0 赞/ 30 阅读

相关 axios入门使用笔记

目录：一.JOSN Server使用： 1.安装，在终端输入： 2. 创建db.jos

￡神魔★判官ぃ/ 2022年11月18日 05:44/ 0 赞/ 244 阅读

相关 axios + webpack + vue。 axios基本使用

目的：在wepack+vue 项目中使用 axios 第一步：安装 cnpm i axios -S 第二步：导入 2-1导入：import axi

Dear 丶/ 2022年05月14日 09:20/ 0 赞/ 334 阅读

相关前端入门之(axios解析)

前言：vue已经放弃维护vue-resource了，然后推荐使用axios，这一推荐不得了了，axios的人气大增啊，在github已经是50多k的star了，axios算是成

比眉伴天荒/ 2022年04月16日 03:59/ 0 赞/ 363 阅读

相关 axios基本使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。主要作用: 从浏览器中创建 [XMLHttpRequests][

待我称王封你为后i/ 2022年03月28日 07:14/ 0 赞/ 377 阅读