首页 > 其他分享 >前端请求代理配置

前端请求代理配置

时间:2023-10-12 10:44:07浏览次数:40  
标签:axios 前缀 前端 代理 changeOrigin localhost 请求

前端请求代理配置,解决跨域问题,适用于React、Vue项目

  1. 优点:可以配置多个代理,可以灵活控制请求是否走代理。
  2. 缺点:配置繁琐,前端请求资源时必须带上前缀。

第一步 安装

yarn add http-proxy-middleware --save

第二步 新建文件

在项目的 src 目录下新建文件 setupProxy.js ,脚手架会自动解析该文件。

第三步 配置代理

在setupProxy.js文件中写入如下代码配置:

const { createProxyMiddleware } = require ('http-proxy-middleware');
module.exports = function(app){
  app.use(
    createProxyMiddleware(
      '/api1',                        //使用 /api 前缀代理配置,(代理1前缀)
      target:'http://localhost:3000', //需要跨域的服务器地址
      //changeOrigin:true 。 控制服务器接收到奥的请求头中host字段的值,值为 localhost:5000
      //changeOrigin:false  控制服务器接收到奥的请求头中host字段的值,值为 localhost:3000
      //此处的值默认为false,我们要设置为:true,如下:
      changeOrigin:true,
      pathRewrite:{
        '^/api1':''
      }              
    ),

    createProxyMiddleware(
      '/api2',                        //使用 /api 前缀代理配置,(代理2前缀)
      target:'http://localhost:3000', //需要跨域的服务器地址
      //changeOrigin:true 。 控制服务器接收到奥的请求头中host字段的值,值为 localhost:5000
      //changeOrigin:false  控制服务器接收到奥的请求头中host字段的值,值为 localhost:3000
      //此处的值默认为false,我们要设置为:true,如下:
      changeOrigin:true,
      pathRewrite:{
        '^/api2':''
      }              
    )
  )
}

第四步 安装 axios 请求库

yarn add axios --save

第五步 开始 axios 请求

import axios form "axios";
//GET请求 比如接口是:"/getData" ,则下面必须要带上 /api1 前缀
axios.get("/api1/getData", {params:{a:10,b:'ok'}}).then(res=>{
  console.log(res)
})


//POST请求 比如接口是:"/getData" ,则下面必须要带上 /api1 前缀
const result = axios.get("/api2/getData", {a:10,b:'ok'}).then(res=>{
  console.log(res)
})

标签:axios,前缀,前端,代理,changeOrigin,localhost,请求
From: https://www.cnblogs.com/melongs/p/17758943.html

相关文章

  • 前端划词选中实现
    1、需求如上图,鼠标划词选中标签,选中的词自动填入到输入框中2、实现<divclass="tag-words"@mouseup="startSelectWord"><divclass="tag-word"v-for="(item,index)intagWords":key="index">{{item.text}}......
  • 11. 用Rust手把手编写一个wmproxy(代理,内网穿透等), 实现健康检查
    11.用Rust手把手编写一个wmproxy(代理,内网穿透等),实现健康检查项目++wmproxy++gite:https://gitee.com/tickbh/wmproxygithub:https://github.com/tickbh/wmproxy健康检查的意义健康检查维持着系统的稳定运行,极大的加速着服务的响应时间,并保证服务器不会把消息包转......
  • 2.前端框架(Vue)
    前端框架(Vue)Vue概念;vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写;基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上;官网:https://v2.vuejs.org/框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开......
  • 关于 Spartacus CMS 请求响应是否应该被 Transfer State 机制 cover 的问题
    Spartacus默认设置是CMS请求会在CSR和SSR两种环境下都执行,动机是应对在页面渲染过程中,Back-Office有变化发生的情况。如果确实只希望CMS只在SSR端执行,将routing.loadStrategy改成ONCE即可。这个Stackoverflow帖子做了详细说明。打开上面的cms-store.module......
  • HTTP请求
    实体标签ETag(实体标签)是HTTP响应头的一部分,用于标识响应内容的版本。它通常是服务器根据资源的内容生成的唯一标识符。ETag的生成方法可以根据资源的不同而变化,但通常有以下几种方式:生成方法描述哈希算法服务器使用哈希算法(如MD5、SHA-1、SHA-256等)计算资源内容的哈希......
  • spring-mvc 请求流程学习
    参考:01、基础入门-SpringBoot2课程介绍_哔哩哔哩_bilibili请求进入HttpServlet的doGet方法然后通过实现类org.springframework.web.servlet.FrameworkServlet#doGet()调用org.springframework.web.servlet.FrameworkServlet#processRequest----》org.springframework.web.ser......
  • 开课吧前端1期.阶段3-1:软件的使用 (bower,atom, node)
    今天主要不讲课,试试环境软件:(推荐,有自己熟悉的用自己的)1.编辑器:atom支持插件: atom-typescript language-vue language-weex markdown-preview-plus2.服务器:wamp(apache+mysql)、xampp、nginx web服务器(要能支持php)——Apache 数据库——MySQL3.Phot......
  • springMVC @Test方法中如何请求https
    原文链接:https://www.longkui.site/error/springmvc-test-https/4823/0.背景springMVC环境,需要在@Test方法中发送一个https请求,按照格式要求发送了,结果报错org.springframework.web.client.ResourceAccessException:I/OerroronPOSTrequestfor"https://xxxx/xxx/xx:jav......
  • Nginx 做前端代理,上传文件速度慢
    同一台服务器,前端部署在nginx,在上传33M的文件时,耗时36s,但是通过IIS或者swagger上传文件,只需要8s解决方案:将Nginx配置文件中 proxy_passhttp://139.196.154.85:54730/;改为localhost: proxy_passhttp://localhost:54730/; 此方案只适用于前后端部署在同一台服务器的情况......
  • 前端大文件上传如何做到刷新续传?
    前言这两天在学习阿里云oss上传。踩了不少坑,终于实现了大文件分片、断点续传的功能。这篇文章主要分享学习笔记,希望能给大家一些帮助。先看效果 技术栈1.前端:react+Ts+axios上传文件2.Node部分:定义接口、阿里云oss3.socket.io:实时同步上传进度特别说明axios中on......