react axios配置代理（proxy)，解决本地开发时的跨域问题

前言

本文基于

“react”: “^18.2.0”

1.暴露隐藏的webpack配置

react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来

yarn eject

会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?

输入 y 回车

成功之后在项目根目录会出现一个 config 文件夹

2.配置代理Proxy

打开 config 文件夹下的 webpackDevServer.config.js 文件

搜索 proxy 找到配置项

参照如下格式，配置代理

proxy: {'/api': {target: 'http://localhost:9000', // 后台服务地址以及端口号ws: true,changeOrigin: true, //是否跨域pathRewrite: { '^/api': '/' }}
},

3.在项目中使用

 /api + 后台接口地址

import React, { Component } from 'react';
import axios from 'axios';class App extends Component {componentDidMount() {axios.get('/api/logout').then(res => {console.log(res);})}
}export default App;

4.接口请求示例

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。

react axios配置代理（proxy)，解决本地开发时的跨域问题相关推荐

vue-cli2.x统一配置接口请求地址和开发环境的跨域代理
1.修改config/dev.env.js(开发环境的baseURL地址统一配置) 2.修改config/prod.env.js(线上环境的baseURL地址统一配置) 3.修改config/inde ...
React配置代理proxy解决跨域问题
一.在package.json中直接设置proxy 和Vue不同,React是在package.json文件中使用proxy配置注意: create-react-app脚手架低于2.0版本时候,可以 ...
Spring Boot笔记-解决前后端分离在开发时的跨域问题
这里可以用Nginx解决跨越问题,也可以用下面这种方式在开发时解决: @Configuration public class CorsConfig implements WebMvcConfigure ...
vue ajax跨域提交,vue-cli开发时ajax跨域的方法
目的:使用vue-cli构建的项目,在开发时,想要访问后台接口获取数据,这时就会出现跨域问题. 在config/index.js中进行如下配置 [即在进行ajax请求时,地址中任何以/api开头的请求 ...
本地跨域处理ajax,Node.js配合node-http-proxy解决本地开发ajax跨域问题
情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. ...
22-CMS前端页面查询开发-Api调用-跨域解决
跨域问题解决测试上边的代理 ,结果报错如下 : No 'Access-Control-Allow-Origin' header is present on the requested resou ...
vue-cil解决开发环境的跨域问题
为什么会产生跨域问题由于浏览器同源策略的限制,当前端项目运行的服务地址和接口服务运行的地址协议域名端口三者有一个不一致就会出现跨域解决开发环境的跨域问题 ue-cli为我们在本地开启了 ...
webhooks_在本地开发时如何测试Webhooks
webhooks by Stefan Doorn 斯蒂芬·多恩(Stefan Doorn) 在本地开发时如何测试Webhooks (How to test Webhooks when you're d ...
Vue-cli proxyTable 解决开发环境的跨域问题(转)
Vue-cli proxyTable 解决开发环境的跨域问题(转) 参考文章: (1)Vue-cli proxyTable 解决开发环境的跨域问题(转) (2)https://www.cnblogs. ...

react axios配置代理（proxy)，解决本地开发时的跨域问题

react axios配置代理（proxy)，解决本地开发时的跨域问题相关推荐

最新文章

热门文章