Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >React Axios将窗口原点附加到提供的Url (json-server)

React Axios将窗口原点附加到提供的Url (json-server)
EN

Stack Overflow用户
提问于 2018-12-17 10:11:41
回答 1查看 571关注 0票数 0

在将json-server api与axios集成时,我有一个奇怪的行为。

我使用json-server来提供db.json文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
json-server --watch db.json --port 4000

在我的react应用程序中,我使用axios调用"http://localhost:4000/tasks

在postman上进行测试,该API返回结果,并且工作正常。

但是使用下面的代码片段(axios),它将react应用程序的两个域和api Url连接到请求。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
try {
        return axios({
            method: 'GET',
            url: `http://localhost:4000/tasks`
        }).then((response) => {
            debugger;
            return response;
        });
    } catch (error) {
        return new Error('Failed to retrieve Tasks');
    }

我在浏览器网络中检查,然后像这样输入请求Url

请求地址:http://localhost:3000/http//localhost:4000/tasks

并因此抛出not found - 404异常

你知道为什么会发生这种事吗?

奇怪的是,当我使用另一个像“星球大战”API "https://swapi.co/api/people/1“这样的api时,它就像一个魔咒。

先谢谢你...

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-18 08:59:10

我已经通过使用环境变量修复了这个问题。

我刚刚创建了一个".env.development“文件,并添加了"REACT_APP_API_BASEURL = 'http://localhost:4000'”。

然后我使用它,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
try {
    return axios({
        method: 'GET',
        url: `${process.env.REACT_APP_API_BASEURL}/tasks`
    }).then((response) => {
        debugger;
        return response;
    });
} catch (error) {
    return new Error('Failed to retrieve Tasks');
}

而且它工作得很完美。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53812984

复制
相关文章
前端基础-json-server与axios
一个项目从立项开始,一般都是前后端同时进行编码工作的,而此时前端需要的接口和数据后台都是无法提供的;
cwl_java
2020/03/26
9100
【axios】使用json-server 搭建REST API
1.1 API 的分类 REST API: restful (Representational State Transfer (资源)表现层状态转化) (1) 发送请求进行CRUD 哪个操作由请求方式来决定 (2) 同一个请求路径可以进行多个操作 (3) 请求方式会用到GET/POST/PUT/DELETE 非REST API: restless (1) 请求方式不决定请求的CRUD 操作 (2) 一个请求路径只对应一个操作 (3) 一般只有GET/POST 1.2 使用json-server 搭建RES
玖柒的小窝
2021/10/05
2.9K0
【axios】使用json-server 搭建REST API
axios知识盲点整理
JsonServer主要的作用就是搭建本地的数据接口,创建json文件,便于调试调用,模拟和后端服务器进行数据的交互
大忽悠爱学习
2021/11/15
4.1K0
一个很大的变化|将Kubernetes支持窗口增加到一年
从Kubernetes 1.19开始,Kubernetes版本的支持窗口将从9个月增加到1年。较长的支持窗口旨在允许组织在一年中的最佳时间执行主要升级。
CNCF
2020/09/04
4840
一个很大的变化|将Kubernetes支持窗口增加到一年
前端基础-重构TodoList案例
修改:<button @click.stop="removeTodo(key,val.id)" class="destroy"></button>
cwl_java
2020/03/26
4660
上手玩一下json-server(二)操作数据篇——POST/PATCH/DELETE
在上一篇中,我们有db.json文件,里面放置了一些水果信息。 现在新建一个demo文件夹,引入jq库文件(常见的是jquery-2.0.3.min.js,此处的jq.js是被我重命名了)。 另,新建一个jq-ajax.html文件,我们将在这个html文件里头操作db.json数据。
celineWong7
2020/11/05
1.8K0
从零开始学习React-在react项目里面使用mock(七)
从零开始学习React-开发环境的搭建(一) https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构,创建组件页面(二) https://www.jianshu.com/p/5b950b8cb73a 从零开始学习React-属性绑定(三) https://www.jianshu.com/p/2c251795d1b3 从零开始学习React-路由react-router配置(四) https://www.jianshu.com/p/2b86d5f4d9d7 从零开始学习React-axios获取服务器API接口(五) https://www.jianshu.com/p/81ca5cc94923 从零开始学习React-解析json、渲染数据(六) https://www.jianshu.com/p/1a998147b09b 从零开始学习React-在react项目里面使用mock(七) https://www.jianshu.com/p/2a5f296a865c
王小婷
2019/11/21
1.8K0
axios笔记(一) 简单入门
打开 http://localhost:3000/,可以在 Resources 中看到所有的接口
赤蓝紫
2023/01/05
1.6K0
axios笔记(一)    简单入门
Ajax笔记(2) -Axios
xhr.onreadystatechange = function() { 当事件发生时执行的代码 }
y191024
2022/09/20
1.4K0
Ajax笔记(2) -Axios
前端必备技能:json-server全攻略
由于json-server需要通过Node对其进行启动,所以首先要安装Node。Node可自行安装,在此不再进行演示。
用户1272076
2020/08/28
1.7K0
vue 构建 todo 项目系列 2
vue 构建 todo 项目系列 1 只是用模拟的数据,页面一刷新就打回原型,本文将用 json-server 构建一个简易的 api,模拟真实的数据服务器
章鱼喵
2019/10/16
6620
json-server
在前端与后端开发的时候,偶尔会有在后端接口没有开发完毕时进行一些接口的mock,这里有一款开源框架做了类似的事情,让你可以“不到30秒得到一个零编码的假REST API”
阿超
2023/06/23
1770
json-server
将oracle驱动包加到maven中
2、确认maven环境变量已整确(cmd 中执行 mvn -v 显示maven的版本信息);
qubianzhong
2018/08/10
5060
Vue里面怎么模拟假数据
在 Vue 组件的 data 选项中定义一个对象,作为假数据的容器。在该对象中设置各种属性和初始值来模拟假数据。
王小婷
2023/09/26
3970
一行命令, 静态json变身api
作为一个前端开发者, 你可以会遇到没有测试数据的尴尬, 而这次我们用json-server, 优雅的解决这个问题 效果 关于 json-server js
zhaoolee
2018/06/14
9500
将Sublime添加到鼠标右键
2、找到 HKEY_CLASSES_ROOT/*/shell 目录,在此目录下操作。
新码农
2020/03/05
3K0
Vue+SessionStorage实现简单的登录
我是基于vue脚手架cli做的,没用过cli的可以看下我之前写的cli脚手架搭建
RtyXmd
2018/08/30
11.7K1
Vue+SessionStorage实现简单的登录
React使用axios请求并渲染数据
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
Leophen
2019/08/23
3.9K0
React-Router-URL参数
React Router 是 React 应用中常用的路由管理库,而 URL 参数则是它的一个关键概念。URL 参数允许您在路由之间传递数据,从而使您的应用程序更灵活和交互性更强。
杨不易呀
2023/10/01
2810
点击加载更多

相似问题

向VBA/VB6集合添加项时出错

41

编译基板添加托盘失败

17

用托盘添加apt回购

16

在基板上添加托盘

111

为自定义托盘基板添加自定义RPC时出错

215
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文