首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

本地访问的react应用程序不执行API调用[CRA]

本地访问的React应用程序不执行API调用是因为CRA(Create React App)默认将API请求代理到开发服务器,而不是直接发送到目标API地址。这是为了解决跨域请求的问题。

CRA是一个用于快速搭建React应用程序的脚手架工具,它提供了一套默认的开发配置,包括开发服务器和代理设置。在开发过程中,前端开发人员通常会将API请求发送到后端服务器,以获取数据或执行其他操作。

为了解决跨域请求的问题,CRA默认将API请求代理到开发服务器。具体而言,当前端应用程序发起API请求时,请求会被代理到CRA的开发服务器,然后由开发服务器将请求转发到目标API地址。这样做的好处是可以避免浏览器的同源策略限制,使得前端应用程序可以与不同域的API进行通信。

在CRA的配置文件中,可以通过在项目根目录下创建一个名为src/setupProxy.js的文件来配置代理规则。在该文件中,可以指定需要代理的API地址和目标地址。例如,可以将所有以/api开头的请求代理到http://example.com/api

代码语言:txt
复制
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://example.com',
      changeOrigin: true,
    })
  );
};

这样,当前端应用程序发起/api/users的请求时,请求会被代理到http://example.com/api/users

对于本地访问的React应用程序不执行API调用的问题,可以检查以下几个方面:

  1. 确保API的地址和端口正确配置,并且API服务器正在运行。
  2. 检查是否正确配置了代理规则。可以尝试在src/setupProxy.js文件中添加或修改代理规则。
  3. 确保前端应用程序中的API请求路径与代理规则中的路径匹配。例如,如果代理规则将/api代理到http://example.com/api,则前端应用程序中的API请求路径应该是/api/xxx
  4. 检查浏览器的开发者工具(如Chrome的开发者工具)中的网络请求,查看是否有错误提示或请求被阻止的情况。

总结起来,本地访问的React应用程序不执行API调用可能是由于CRA的代理配置问题导致的。通过检查API地址、代理规则和请求路径,可以解决这个问题。如果问题仍然存在,可以进一步检查网络请求和错误提示,以确定具体的原因。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

快将你 React 应用迁移到 Vite 吧,速度太快啦

我们可以迁移到 Vite,而不是使用 CRA 来创建 React App。Vite 是下一代前端工具,可以更快地构建应用程序。...无论应用程序大小如何,热模块更新 (HMR) 都能保持快速。 对 TypeScript、JSX、CSS 等具备开箱即用支持。 支持多页面构建。 具有完整 TypeScript 类型 API。...我已将现有的基于 CRA 应用程序迁移到 Vite。让我们比较一下差异。 CRA 开发服务器启动时间 VS Vite 开发服务器启动时间 CRA 用了 12 秒来启动开发服务器。...接下来,让我们也比较一下两者生产构建时间。 CRA build 时间 VS Vite build 时间 CRA花了16.66秒来构建应用程序。让我们看看Vite性能。.../api/ 现在,你可以执行 npm install or yarn 上述命令执行完毕后,npm run start 启动你应用看看效果吧~ 结尾 Vite 看起来非常高效且快速,比 CRA 节省了更多时间

1.3K20

我们如何使用 Next.js 将 React 加载时间缩短 70%

随着我们客户规模和复杂性增加,性能变得越来越受到关注,我们达到了 CRA 设计支持极限。最重要是,CRA 本身并不支持跨多页应用程序路由分割,所以我们页面加载时间慢得令人沮丧。...Next.js 是一个框架,带有构建工具和运行时库,用于创建丰富 React 应用程序。...文件,该文件显式地为应用程序每个页面设置了一个路由组件: import Loadable from "react-loadable"; import { Route, Switch } from...此外,内置 Next.js Webpack 配置会自动将页面分割成各自包(bundle)。这意味着访问一个用于本地开发页面只需要构建该页面所需包内容。...虽然 CRA 支持代码分割,但根据我们经验,Next.js 配置对于本地重建来说是开箱即用,速度快得多。

4.8K10
  • 创建 React 应用 7 种方式,你用过几种?

    一:Create-React-App 首先,我们第一个是想到react 官方团队提供脚手架工具 Create React App(cra) npx create-react-app my-app...因此社区中提供了一些可配置 cra 方案,craco、react-app-rewired craco 可配置 cra 这里以 craco 为例,首先需要安装 @craco/craco yarn add...运行 npm run start 启动脚本时, React 应用程序应该在端口 8080 上运行,此时我们可以在本地开发 react 应用了 配置 proxy 代理 开发时,需要请求接口,而接口往往是由后端同学完成...,接口需要通过访问后端 IP 地址来访问,若直接访问会存在跨域问题。...若以上两个网站访问速度较慢,那么掘金码上掘金也可以帮助你创建在线 React 示例应用。

    7.1K10

    VS Code 调试完全攻略(5):基于浏览器 React 应用

    这次我们来研究怎样把调试器连接到用 Create React App 生成 React 程序。你将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。...它超级强大,同时又很容易,所以在调试 CRAReact 程序时没有理由这样做。 ? VS Code 调试完全攻略系列目录 ?...基础知识(点击直达) 步进逐行调试(点击直达) 编辑变量并重新执行函数(点击直达) launch.json 和调试控制台(点击直达) 基于浏览器 React 应用(?...You can now view react-cra in the browser....request:被设置 launch 选项意味着我们将会启动浏览器进行调试,并将加载下面指定地址。它与你手动执行操作并没有太大区别,但是会自动为你执行代码。

    2.5K20

    【前端部署第九篇】通过 traefik 自动为前端项目配置域名及 HTTPS

    回到我们 create-react-app 部署示例,我们如何将此项目可使他们在互联网通过域名进行访问? 我们将它部署到 https://cra.shanyue.tech 中作为示例。...cra.shanyue.tech 域名通过 A 记录指向搭建好 traefik 网关服务器 IP 地址。此处需要通过域名提供商控制台进行配置。...$ docker-compose -f domain.docker-compose.yaml up domain 访问 https://cra.shanyue.tech 成功。...通过 docker.sock 调用 Docker Engine API3 可将同一网络下所有容器信息列举出来。...长按识别二维码查看原文 标题:Docker Engine API # 列举出所有容器标签信息 $ curl --unix-socket /var/run/docker.sock http:/containers

    1.7K20

    【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

    终于可以来一个与真实项目接近带有复杂度项目,以 CRA 部署为例: 「部署一个 Creact React APP2 单页应用。」...# 创建一个 cra 应用 $ npx create-react-app cra-deploy # 进入 cra 目录 $ cd cra-deploy # 进行依赖安装 $ yarn # 对资源进行构建...构建时间优化: 构建缓存 我们注意到,一个前端项目的耗时时间主要集中在两个命令: npm install (yarn) npm run build 在本地环境中,如果没有新 npm package 需要下载...「那 Docker 中是也可以做到这一点?」 在 Dockerfile 中,对于 ADD 指令来讲,如果「添加文件内容 checksum 没有发生变化,则可以利用构建缓存」。...访问 http://localhost:4000 页面成功。 6.

    1.6K20

    JavaScript 测试系列实战(一):使用 Jest 和 Enzyme 测试 React 组件

    您可以测试应用程序许多方面,从单个函数及其返回值到在浏览器中运行复杂应用程序。万丈高楼平地起,让我们先来了解一下有哪些测试。...E2E 测试重点是在我们正在运行应用程序中模拟实际用户(例如模拟滚动、单击和键入等行为),并检查我们应用程序是否从实际用户角度运行良好。...首先用 Create React App(CRA)搭建项目脚手架: create-react-app javascript-test-series 然后我们删除 src 目录下所有预创建文件(当然你也可以手动删除...,可参考 Expect API CRA 已经为我们配置好了 Jest,这里直接运行 npx jest 命令,就可以看到测试结果了: PASS ....它允许我们在运行测试时,只渲染父组件而渲染其所有的子组件。浅层渲染十分快速,因此非常适合单元测试。

    3K10

    React 教程:React 快速上手指南

    显然,如果我们要把 Redux 和 React Router 等添加到 React,它就拥有了制作常规单页应用程序所需所有东西,这可能这就是它有时被错误地描述为框架而不是库原因 。...即使我们正在提取 Component,仍然需要 React,因为 Babel 在 JSX 之上转换为 React.createElement。所以如果我们导入 React 就会失效。...**SetState **是一种更改本地状态对象方法(通过执行浅层合并),之后组件通过重新渲染自己来响应它。...调用方式有好几种,其中一种方式允许我们在对状态进行更新能够后立即对组件执行某些操作: setState({value: ‘5’}) setState((state, props) => ({value...Context React 最近稳定 Context API(已经在 React 中存在了相当长时间,尽管被 Redux 等一些最受欢迎库广泛使用,却是一个实验性功能)有助于我们解决一个问题:Props

    1.4K30

    Create React App 源码揭秘

    Create React App是一个官方支持创建React单页应用程序脚手架。它提供了一个零配置现代化配置设置。 平时工作中一部分项目使用React,使用之余也需要了解其脚手架实现原理。...此时已经实现了create-react-app`package核心功能。下面将进一步剖析cra-tempalte, react-scripts`。...packages/cra-tempalte cra-tempalte可以从cra-tempalte拷贝,启动一个简易React单页应用。...对React原理感兴趣可前往由浅入深ReactFiber架构查看。 packages/cra-tempalte--typescript 同上,不是本文讨论重点。...先来了解下使用node_modules模式机制 将依赖包版本区间解析为某个具体版本号 下载对应版本依赖tar 报到本地离线镜像 将依赖从离线镜像解压到本地缓存 将依赖从缓存拷贝到当前目录node_modules

    3.6K20

    SPA和React: 并不总是需要服务器端渲染

    您可能已经注意到,React文档“开始一个新React项目”部分不再推荐使用CRA(Create React App)。...现在我要讲一个几年前我构建SPA小故事,以便您自己判断。 SPA完美可接受使用案例 回到2018年,我被一家“技术咨询”公司聘来执行一家位于伦敦大型金融机构“数字化转型”。...我构建应用程序约需8周完成,仅使用客户端HTTP请求从API获取数据,具有身份验证功能,使用现有的Azure DevOps管道进行了部署,并且没有进行搜索引擎优化。...有许多内部应用程序永远不会面向公众,也不需要使用更现代React驱动SSR框架提供任何功能。但是由于React文档不再推荐CRA,如果今天要构建SPA,您还可以使用什么呢?...使用Vite和React Vite可以与React一起使用,作为比CRA中使用Webpack(模块打包器)更现代替代品。

    14210

    类型即正义:TypeScript 从入门到实践(序章)

    React 前端工程师学习路线[12]一部分,欢迎来 Star 一波,鼓励我们继续创作出更好教程,持续更新中~ 前提条件 确保你已经安装了 Node.js,可以访问官网安装:官网地址[13]。...开发服务器,并打开浏览器窗户,访问 http://localhost:3000/[16] 来展示你应用初始界面: ?...customize-cra:是 CRA 在发布 2.0 之后出来一个辅助 react-app-rewired 更方便定制 CRA Webpack 配置一个库,它提供了一些开箱即用 API。...接下来就需要改写一下 CRA 之前通过 react-scripts 跑开发构建流程,用我们安装 react-app-rewired 脚本来替换它,当安装完了所以依赖,以及用react-app-rewired...,使用 override API,接收两个修改配置函数调用,fixBabelImports 用于配置 antd 按需引用,addLessLoader 用于配置 antd 主题,这里我们使用了 Ant

    1.5K20

    React应用中实现Web推送通知

    默认情况下,Create-react-app CRA工作方式是在开发人员模式下不存在ServiceWorker,并且任何以前安装sw都将被虚拟人替换。...额外步骤:等等,生产模式如何? 在这种情况下,Create React App会编译build文件夹中文件,并在其中放置一个默认服务工作程序,其中包含对现代应用程序有用东西。...首先,添加一个新depenendecy: yarn add cra-append-sw 之后,我们需要在package.json中扩展build-script,在其中添加一个新命令,该命令在main进程之后执行...,这样整个行将如下所示: react-scripts build && cra-append-sw --skip-compile ....如果用户拒绝了这样请求,您将没有第二次机会提供订阅,直到用户取消浏览器设置中禁止(他们不太可能想要这样做)。因此,请明智地利用此机会选择合适时间:用户首次访问网站绝对不是这种情况。

    3.1K30

    React教程:组件,Hooks和性能

    首先使用 Create React App(CRA)初始化一个新项目,然后开始开发。不过遗憾是,随着时间推移,代码可能会变得难以维护,特别是在你不熟悉 React 情况下。...通过错误边界,可以得到更多灵活性。你可以在整个应用程序中使用并显示一个错误消息,或者在某些小部件中使用它但是不显示,或者显示少量信息来代替这些小部件。...它们本质上是带来了新体验,例如: 允许删除许多 class 组件,这些组件我们仅仅是使用而不归我们拥有,例如本地状态或 ref,所以组件代码看上去更容易阅读。...另一方面,useEffect 为我们功能组件添加副作用,无论是订阅、API调用、计时器、还是任何我们认为有用东西。...代码拆分 代码拆分方式比这里给出建议多得多,但让我们关注 CRAReact 本身可用内容。

    2.6K30

    Next.js 越来越难用了

    为什么选择 Next.js 而不是 Create React App 当我首次接触 Next.js 时,它当时“竞争对手”是 Create React App(简称 CRA)。...当时我所有的项目都是基于 CRA 来开发,但之后我选择转向 Next.js,主要有两大原因: 我偏爱基于文件路由方式,因为它让我能够减少样板代码编写。...因此,我们采取了另一种策略,即暴露 Web 请求 API特定方法,并针对不同使用场景进行了统一和优化:这些 API 覆盖了组件、服务器操作、路由处理程序和中间件等场景。...在 PropelAuth,我们经常收到错误报告并非真正错误,而是用户误以为自己发起了一个 API 调用,但实际上只是读取了缓存结果。...在电子商务领域,页面加载速度提升意味着更多收入,因此,为了获得这些优势,你完全会接受使用更为复杂框架。 然而,如果我是在为我 SaaS 应用程序构建仪表板,我可能就不会太关心这些功能了。

    16810

    【原创】不想eject,还咋修改create-react-app配置?

    一、先抛问题 许多刚开始接触create-react-app框架同学,不免都会有个疑问:如何在执行eject操作同时,修改create-react-app配置。...今天胡哥就来带大家一起来看看这个问题~ 二、为啥建议执行eject 1. 执行eject产生了什么变化?...create-react-app框架本身将webpack、babel相关配置封装在了react-scripts中, 执行yarn eject后,会将webpack、babel等配置暴露在config目录下...执行eject带来了什么问题? 首先,执行eject是不可逆,复杂webpack等配置由框架本身转交给用户自己进行维护了。...@7.3.0,如果是最新版本和上面的react-app-rewired和customize-cra版本配合配置时有问题,所以使用了低版本

    2.9K40

    将create-react-app迁移到Next.js

    在本文中,我将引导您完成将React应用程序(Create-React-App: CRA)迁移到Next.js所采取步骤。 这非常简单,只需几个小时即可完成。...循序渐进:将CRA转换为Next.js 创建一个新Next.js项目 首先,在终端中运行此命令以创建新应用程序: $ npx create-next-app 将组件放入Next.js项目: 在新Next.js...路由:React vs Next.js 普通React要么呈现为真正单页应用程序(类似于网络上电话应用程序),要么借助路由器组件呈现路由,而Next.js附带了内部路由机制。...随着页面设置顺利进行,您现在需要将整个项目中链接更改为本地链接。如前所述,Next.js附带了预先打包路由解决方案,它们语法略有不同。...如您在本文中所见,这使得将React应用程序迁移到Next变得非常容易。 希望您现在应该至少在本地拥有一个正在运行Next.js应用程序

    6.1K40
    领券