开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么axios.get在浏览器中访问时会得到null，而URL却能正常工作？

axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中发送HTTP请求。它可以在浏览器中使用XMLHttpRequest或者在Node.js中使用http模块发送请求。

当使用axios.get方法发送GET请求时，它会返回一个Promise对象，该对象会在请求成功时resolve并返回响应数据。但是，如果在浏览器中访问时得到null，可能是由于以下几个原因：

跨域问题：浏览器有同源策略，限制了在不同域名、端口或协议之间进行的HTTP请求。如果你的axios.get请求的URL与当前页面的域名、端口或协议不一致，浏览器会阻止该请求，并返回null。解决跨域问题可以通过设置服务器端的CORS（跨域资源共享）头部信息，或者使用代理服务器进行请求转发。
服务器端问题：如果请求的URL在服务器端没有对应的资源或接口，服务器会返回404错误，导致axios.get方法返回null。确保你的URL是正确的，并且服务器端有相应的资源或接口。
异步问题：axios.get方法是异步的，它会立即返回一个Promise对象，然后继续执行后面的代码。如果你在axios.get方法后面立即访问返回的数据，可能会得到null，因为请求还没有完成。你可以使用Promise的then方法或者async/await来处理异步请求的返回数据。

总结起来，axios.get在浏览器中访问时得到null的原因可能是跨域问题、服务器端问题或者异步问题。你可以通过解决跨域问题、确保URL正确、处理异步请求的返回数据来解决这个问题。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），它可以加速静态资源的访问，提高网站的访问速度和稳定性。产品介绍链接地址：https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue跨域配置

并且服务端可以将数据返回给浏览器，浏览器也可以正常接收数据，但是因为同源策略，浏览器没有进一步传递数据，浏览器将数据拦截了。...3、解决思想配置代理服务器正常的请求流程如下，前端直接向后端发起请求。因为端口不同，所以会触发同源策略，报跨域错误，浏览器不显示数据。...关于两个8080端口问题，浏览器是访问8080端口，而不是占用端口，8080上只有一个代理服务器在监听。 4、配置跨域，解决问题。....."); }) 运行实例如下：获得到服务端的数据{ name:'test', age:20 }，而不是本地的{ "name":"test2",...为什么会出现跨域？接着重点介绍了Vue中如何配置跨域。最后还提供了服务端（express）的跨域配置。

911 0

【React】归纳篇（八）在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求

其封装了XmlHttpRequest对象的ajax,且使用promise风格写法，在浏览器的客户端与服务端都能使用。你可能会想问为什么不用fetch()原生函数呢？...如果你想使用fetch()在低版本浏览器中，你可以考虑使用fetch.js的兼容库。...[axios CDN] https://cdn.bootcss.com/axios/0.18.0/axios.js //get方式 axios.get(url) .then(response=>{...q=tetris+language:assembly&sort=stars&order=desc' axios.get(url)...q=${searchName}`; axios.get(url) .then(response => { //得到数据

5902 2

Vue 09.前后端交互

方法中，也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function(data){ console.log(data) },function...); xhr.send(null); }); return p; } // 注意：这里需要开启一个服务 queryData('http://localhost:3000/data')...); xhr.send(null); }); } var p1 = queryData('http://localhost:3000/a1'); var p2 = queryData('http...GET // GET参数传递 - 传统URL 通过url?...node.js的http客户端支持浏览器和node.js 支持promise 能拦截请求和响应自动转换JSON数据能转换请求和响应数据基本使用 axios.get('http://localhost

6K3 0

前端成神之路-vue04

正常情况 resolve('hello'); }else{ //4....方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function(data){ console.log(data...); xhr.send(null); }); return p; } # 注意：这里需要开启一个服务 # 在then方法中，你也可以直接return...通过url ？...get 请求传递参数 # 2.1 通过传统的url 以 ? 的形式传递参数 axios.get('http://localhost:3000/axios?

3.7K1 0

前端三大框架之Vue-day04

正常情况 resolve('hello'); }else{ //4....方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function(data){ console.log(data...); xhr.send(null); }); return p; } # 注意：这里需要开启一个服务 # 在then方法中，你也可以直接return...通过url ？...get 请求传递参数 # 2.1 通过传统的url 以 ? 的形式传递参数 axios.get('http://localhost:3000/axios?

3.2K2 0

05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例

function(resolve,reject){ // 成功时调用 resolve() // 失败时调用 reject() p.then(function(ret){ // 从resolve得到正常结果...); xhr.send(null); }); return p; } // queryData('http://localhost...返回普通值返回的普通值会直接传递给下一个then,通过then参数中函数的参数接受该值 */ Example <!...return data.json(); }),then(ret=>{ console.log(ret); }); axios请求组件 axios基本特性 /* axios是一个基于Promise用于浏览器和...具有以下特征: 支持浏览器和node.js 支持promise 能拦截请求和响应自动转换JSON数据 */ axios基本用法 axios.get('/adata

3.2K5 1

二十.接口调用

正常情况 resolve('hello'); }else{ //4....方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function(data){ console.log(data...); xhr.send(null); }); return p; } # 注意：这里需要开启一个服务 # 在then方法中，你也可以直接...url 以 ?...get 请求传递参数 # 2.1 通过传统的url 以 ? 的形式传递参数 axios.get('http://localhost:3000/axios?

6.7K1 0

几种常见的跨域解决方法

前言由于浏览器的同源策略，当我们请求网络资源时，所在页面的url中的协议，端口，域名其中一个与请求资源的url不同，都会出现跨域的问题。...几种解决跨域问题的方法jsonpjsonp主要是利用了script标签的src属性不受同源策略的影响，通过后端的配合从而解决跨域问题下面举个栗子：我们在页面加载完毕后就发起get请求，请求的url是本机的...来让浏览器可以正常的接收到服务器返回的数据，jsonp是需要后端配合使用的，先来看代码，后面再仔细捋一遍前端代码：这里创建了一个script标签，然后将它的src属性赋值为请求资源的url地址，并且携带...XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问请求中没有使用 ReadableStream...日常工作中，用得比较多的跨域方案是cors和Proxy代理服务器，Proxy主要就是利用同源策略对服务器不起作用。

1.6K6 0

React 配置代理

因为jquery的思想是在操作DOM，而React尽量让我们不要去操作DOM。...from 'axios' ; 声明state，里面有一个变量data componentDidMount 生命周期（挂载完毕） axios.get，get请求方式，参数是请求后断的URL。...那么为什么这个中间人就可以发送请求给8000端口呢？因为它上面没有ajax引擎。图片怎么配置代理呢？...⚠️ 我们axios.get()中的请求地址中端口还是8000，需要将其改为3000.也就是我们上面所说的。我们再试验一下。...把axios.get中的请求地址改为http://localhost:3000/index.html 可以发现它请求成功。

1.2K4 0

深入解析Node.js中5种发起HTTP请求的方法

你需要以区块为单位接收响应数据，而不是只提供一个回调函数，以便在收到所有数据后就立即执行。如果它是JSON格式你还需要进行手动解析。尽管工作量不大，但是它仍然会带来一些不必要的操作。...使用npm安装Axios，在终端中输入以下命令： npm install axios@0.16.2 下面的代码实现相同的功能，得到URL并解释当天的天文学图片。...你甚至可以通过 axios.all发起多个并发请求，比如说你想一次性得到两天的天文图片可以这样做： var axios = require('axios'); axios.all([ axios.get...SuperAgent 与Axios类似，SuperAgent 是另一个流行的库，主要用于浏览器中的Ajax请求，但也适用于Node.js。...最后的想法以上并不是全部的解决方案，不过看到了这里，你知道了在Node.js中一些流行的HTTP库中的基本功能是怎样工作的。

3.4K4 0

Vue前端交互

2）、返回普通值，返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值。 1 <!...1）、Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果。 2）、Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果。 1 <!...fetch(url).then(fn2).then(fn3).then(fn4)....catch(fn); 4)、实现逻辑是调用一个接口，然后通过then的方式得到数据，通过data.text()返回...axios官网，https://github.com/axios/axios，是一个基于Promise用于浏览器核node.js的http客户端。 1）、支持浏览器核node.js。...2）、相应拦截器，在获取数据之前对数据做一些加工处理。 1 <!

3K1 1

【面试Vue全家桶】vue前端交互模式-es7的语法结构？asyncawait

在JavaScript中的世界里，所有的代码都是单线程执行的。因为这个缺点，所以会导致在JavaScript中的所有网络操作，浏览器事件，都必须是异步执行的，异步执行可以用回到函数实现。...newPromise(function(resolve, reject){// 成功回调 resolve()// 失败回调 reject()});p.then(function(ret){// resolve得到正常的结果...，并将异步操作的结果，作为参数传递出去，而reject的作用是将promise对象的状态从“未完成”变成“失败”，就是从Pending变成rejected，在异步操作失败时调用，并将异步操作报出的错误，...处理异常情况reject('服务器出错'); }; xhr.open('get',url); xhr.send(null); }); }varp1 = queryData(url);varp2...get传递参数，第一，通过url传递参数，第二种，通过params传递参数 axios.get('/da?

1.5K1 0

axios介绍与使用说明 axios中文文档

本周在做一个使用vuejs的前端项目，访问后端服务使用axios库，这里对照官方文档，简单记录下，也方便大家参考。...Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。...github开源地址https://github.com/axios/axios 特性在浏览器中创建 XMLHttpRequests 在 node.js 则创建 http 请求支持 Promise...` 允许在向服务器发送前，修改请求数据 // 只能用在 "PUT", "POST" 和 "PATCH" 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或...浏览器在浏览器环境，你可以使用 URLSearchParams API ：: const params = new URLSearchParams(); params.append('param1',

76.7K11 3

axios详解以及完整封装方法

axios详解以及完整封装方法一、axios是什么 Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。...它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。...的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。...，为什么要拦截呢，我们拦截请求是用来做什么的呢？...api接口管理的一个好处就是，我们把api统一集中起来，如果后期需要修改接口，我们就直接在api.js中找到对应的修改就好了，而不用去每一个页面查找我们的接口然后再修改会很麻烦。

6.2K1 2

Django+Vue开发生鲜电商平台之6.使用Vue实现商品类别和商品数据前台显示

此时，以嵌套的形式在父类别中显示出子类别，并且属于三层嵌套。...二、Vue展示商品分类在测试前需要先在fresh_online目录下执行命令cnpm run dev启动前端项目，启动后访问，可以看到： ? 显然，商品分类展示完整。...在前端项目fresh_online中，在src/api/api.js中定义了数据API接口： import axios from 'axios'; let host = 'http://shop.projectsedu.com...，即禁止跨域访问，当前端口是 8080，而数据接口端口是8000，因此被浏览器自动拒绝，一种方式是对服务器进行设置，还有一种是通过前端代理解决，这里采用第一种方式：首先在虚拟环境中执行pip install...= null){ getCategory({ id:this.

1.7K3 2

前后端数据交互(五)——什么是 axios？

在浏览器端和 node 端都可以使用。支持 Promise API。支持请求和响应拦截。响应数据自动转换 JSON 数据。支持请求取消。可以批量发送多个请求。...如：axios(config) /* 如发送一个post请求的配置参数如下 */ axios({ method: 'post', //请求方法 url: '/user/12345', //访问接口...使用语法： /* 第一种处理方式 */ axios.all([ axios.get(URL1), axios.get(URL2), ]).then(res=>{ console.log(res...statusText:'OK', //响应头信息 headers: {}, //config是在请求的时候的一些配置信息 config: {} } 四、axios 常见应用 axios既可以在浏览器端使用...在浏览器端发送的是XMLHttpRequest，在 node.js 发送的是 http 。像VUE、React、Node等项目都可以使用axios。

9003 0

Servlet基础入门

Servlet 的生命周期 1、执行 Servlet 构造器方法 2、执行 init 初始化方法，在第一次访问的时候，创建 Servlet 程序会调用。...3、执行 service 方法，每次访问都会调用。...和端口号常见的GET 请求 form 标签 method=get a 标签 link 标签引入 css Script 标签引入 js 文件 img 标签引入图片 iframe 引入 html 页面在浏览器地址栏中输入地址后敲回车...AJAX 是一种浏览器异步发起请求，局部更新页面的技术（可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如搜索联想，在百度搜索框只输入一两个字搜索框下面就会自动列出可能搜索的关键词...]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 注意：在使用别名方法时， url、method、data

8444 0

一篇文章带你了解axios网络交互-Vue

axios是基于Promise的HTTP库，可以用在浏览器和node环境中，在应用程序中，向服务器端发送Ajax请求同时获取服务器端相应的HTTP请求响应库。我们为什么使用它呢？它的好处有哪些。...第一种情况下，在vue cli应用程序中，那么就要创建vue cli应用程序，然后安装axios，接着配置axios，就可以使用了。...// url axios.get('...?...，而访问相同的域不会出现问题，如何解决这种问题，这个问题就叫做跨域问题。...使用的解决方法：第一种是通过vue框架来配置跨域访问，第二种事通过服务器端，修改node程序来实现跨域问题。在vue框架中的vue.config.js中，配置代理服务器。

9961 0

axios知识盲点整理

` 允许在向服务器发送前，修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或...(config): 等同于 axios(config) axios.get(url[, config]): 发 get 请求 axios.delete(url[, config]): 发 delete...为什么要设计这个语法?...为什么要设计这个语法?...基本流程配置 cancelToken 对象缓存用于取消请求的 cancel 函数在后面特定时机调用 cancel 函数取消请求在错误回调中判断如果 error 是 cancel, 做相应处理

4.1K2 0

Vue笔记：使用 axios 发送请求

在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。关于为什么放弃推荐?...axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：从浏览器中创建 XMLHttpRequest 从 node.js 发出 http...$http = axios 在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http命令 methods: { postData () { this....axios.request（config） axios.get（url [，config]） axios.delete（url [，config]） axios.head（url [，config]）...浏览器在浏览器中，您可以使用URLSearchParams API，如下所示： var params = new URLSearchParams(); params.append('param1',

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭