React跨域配置
2023-02-18 16:37:32 时间
# React跨域配置
在实际的开发过程当中,因为采用前后端分离的开发模式,所以前端和后端在制定好数据接口以后就会并行开发,而在和后端进行联调的时候往往会出现跨域的问题
# 方式一、在package.json进行配置
直接在package.json当中进行如下的配置:
"proxy": "http://localhost:8000"
然后你页面中的请求fetch('/api/xxxx/')就会转发到proxy中的地址
# 方式二、使用http-proxy-middleware
这是在实际开发当中最常用的一种前端跨域解决方案
- 首先在先
http-proxy-middleware
npm i http-proxy-middleware # yarn add http-proxy-middleware
- 在
src
目录下新建setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://xxxxx:xxxx',
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
})
);
};
经过如下的配置后就能够在开发的时候进行跨域请求后端接口的数据
相关文章
- 浅析MetaForce原力元宇宙佛萨奇2.0智能合约系统开发逻辑详解丨佛萨奇2.0源码功能开发
- ES6数组的扩展扩展运算符(spread)三个点(...)
- Vue路由嵌套控制台发出警告Named Route ‘Home‘ has a default child route. When navigating to this named route (:to
- Vue-cli搭建的项目中路径别名的配置
- Vue报错避免冗余导航解决方法
- 佛萨奇2.0波场链/币安链/马蹄链DAPP智能合约系统开发成功案例及源码交付
- BetterScroll2.0在Vue中的基本使用
- 封装格式化日期工具函数
- 封装获取URL中params的值
- Vue非父子组件传值之事件总线(eventbus)的使用方式
- Neuron 2.3.0 发布:更轻松地接入和管理海量工业设备
- Vue中websocket的使用方法
- IE中 时间对象方法getTime返回NaN
- 解决WebGl使用OrbitControls控件监听鼠标操作时报错
- ES6新内置对象Reflect和Proxy的基本使用
- Mac电脑照片编辑修图软件精选 每一款各有千秋!
- Vue双向绑定实现原理
- M1/M2 芯片的Mac电脑上虚拟机安装 Windows 11 图文教程
- ES6内置对象Proxy代理数据demo
- React初识 Hello React