首页 > 其他分享 >React18使用 http-proxy-middleware代理跨域

React18使用 http-proxy-middleware代理跨域

时间:2023-02-06 10:02:03浏览次数:43  
标签:axios http 跨域 middleware api proxy 重启

1、安装

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

 

2、创建 src/setupProxy.js  (src目录下创建文件夹)

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://www.mockmock.sssmc',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

 

3、重启项目 !!!!!! 重启项目 !!!!!! 重启项目 !!!!!!  

 

4、使用

import axios from 'axios'

axios.get('/api/mock/list')
.then(res => {
  console.log(res)
})

 

标签:axios,http,跨域,middleware,api,proxy,重启
From: https://www.cnblogs.com/-roc/p/17094541.html

相关文章

  • http
    1、get和post的区别1)在地址栏中和超链接中是get2)安全角度,post比get安全些,get会把请求参数直接写在资源路径后面。post请求是把请求参数放在http请求头中传输。3)post......
  • 从 HTTP/1.1 到 HTTP/3
    从HTTP/1.1到HTTP/3,解决了一些旧协议的问题,引入了好用的新功能。HTTP/1.1HTTP/1.1通过在传输层和应用层之间增加SSL/TSL解决数据不安全的问题,但它本身还有一些其它......
  • aws云上部署vue代码+nodeJS跨域配置
    大致需求客户想要构建一个新的客户站点,前端通过Https来访问VUE界面,然后VUE跨域Https访问后端的接口服务,通过NodeJS来提供后台服务。假定是全新的服务,本文从域名申请配置、CD......
  • Forest – 开源的 Java HTTP 客户端框架
    什么是Forest?Forest是一个开源的JavaHTTP客户端框架,它能够将HTTP的所有请求信息(包括URL、Header以及Body等信息)绑定到您自定义的Interface方法上,能够通过调......
  • [Express] Add error handling middleware for express
    Expressapp:importcorsfrom'cors';importexpress,{Application}from'express';importroutesfrom'./routes';import*asmiddlewaresfrom'./middleware......
  • camle rest组件怎么和netty-http进行关联起来
    rest("/apibus/busi/").produces(consumes).consumes(consumes).post("processApply").route().log("流程操作申请").to(BusiApplyRoute.ROUT......
  • Nginx之资源压缩,大文件传输,缓冲区,缓冲机制,IP黑白名单,跨域,防盗链
    目录1Nginx1.1资源压缩1.2大文件传输配置1.3Nginx缓冲1.3.1Nginx缓冲区1.3.2Nginx缓存机制1.3.3缓存清理1.4Nginx实现IP黑白名单1.5Nginx跨域配置1.5.1跨域问题......
  • 热点面试题:常见的http code 及含义?
    前言极度投入,深度沉浸,边界清晰前端小菜鸡一枚,分享的文章纯属个人见解,若有不正确或可待讨论点可随意评论,与各位同学一起学习~欢迎关注​​『前端进阶圈』​​公众号,一起探......
  • 接口无法连接需要配置代理跨域位置
    vue.config.js中devServer:{  port:port,  open:true,  overlay:{   warnings:false,   errors:true  },  //配置代理跨......
  • 【缓存策略及实践】前端如何配置 HTTP 缓存机制
    缓存的目的主要作用是可以加快资源获取速度,提升用户体验,减少网络传输,缓解服务端的压力。强缓存不需要发送请求到服务端,直接读取浏览器本地缓存,显示的HTTP状态码是200......