【Vue学习笔记】vue-cli配置代理服务器（devServer.proxy）解决跨域问题

已于 2022-08-12 11:37:43 修改
阅读量764 收藏
点赞数
分类专栏： Vue学习笔记 文章标签： vue.js 学习 前端 vue
于 2022-06-08 11:05:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44862029/article/details/125165932
版权
本文是关于Vue CLI如何使用devServer.proxy配置代理服务器以解决开发环境中的跨域问题。介绍了两种方法，方式一是基本配置，仅能设置一个代理且所有请求都将被代理。方式二是更灵活的配置，可以设定多个不同的代理规则。
摘要由CSDN通过智能技术生成

vue-cli配置代理服务器（devServer.proxy）

目录

方式一

这种方式只能配置一个，并且不能自由的决定请求是否经过代理服务器

module.exports = {
   
  devServer: {
   
    proxy: 'http://localhost:4000'
    //这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000
  }
}

方式二（可配置多个）

module
最低0.47元/天 解锁文章
Summer⊙
关注
专栏目录
Vue进阶（五十四）：vue-cli 脚手架 dev-server
2401_84447417的博客
04-29 567
/ 挂载静态资源，下面的方法是用虚拟目录来访问资源，staticPath就是虚拟目录路径，其实不管设不设置都是static。// 下面的staticPath是 static ，path.posix.join其他配置文件中我已经介绍了，这里不再赘述。// app.use是在响应请求之前执行的，用来指定静态路径，挂载静态资源。// 下面结果就是 ‘http://localhost:8080’// 下面是es6的promise规范，用来处理嵌套请求的。_resolve() // 这里没有传递数据，只是在模拟。
Vue-cli解决跨域问题--配置代理服务器
linmuqi0928的博客
04-18 1405
前置知识 常用发送ajax请求方式 1.xhr ：new XMLHttpRequest() 真正开发中不常用，一般都是对xhr进行二次封装 2.jQuery（对xhr的封装） 核心是对DOM操作，在Vue中引入不合适（Vue的核心就是减少DOM操作） 3.axios（对xhr的封装） 最推荐！！！ 是promise风格 支持请求拦截器 和响应拦截器 体积小 大约是jQuery的1/4 4.fetch 和xhr是平级的，是js里面内置的方法，可以直接new fetch 但是fetch.
Vue CLI4.0 webpack配置属性——devServer.proxy
Jay的博客
09-26 3887
前言 在《Vue CLI4.0 webpack配置属性——devServer》中，我初略提及了 devServer.proxy 。但是并没有做详细的讲解。一、是因为，面对跨域问题，我常用的做法是让后端做处理；第二个原因呢？其实我并没有真正的设置成功过。所以我不敢写，怕误导大家。 关于后端如何处理跨域问题，可查看：《koa2 + VueCLI 4.0 + axios 跨域问题》 devServer.proxy devServer.proxy Type: object [object, function
VUE配置代理服务器
最新发布
qq_37598460的博客
08-28 233
在这个配置中，当请求以/api开头时，所有的请求都会被代理到http://target-server.com。在Vue项目中，配置代理服务器通常是为了解决开发过程中的跨域问题。你可以在项目根目录中的vue.config.js文件中配置devServer.proxy选项来设置代理。现在，当你发送一个请求到/api/some-endpoint时，它会被代理到http://target-server.com/some-endpoint。请确保在配置代理时，目标服务器地址是可以访问的，否则代理将无法工作。
devServer之proxy跨域
Mia的博客
09-04 2万+
概念 什么是同源策略 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 所谓同源是指：协议、域名、端口都相同 什么是跨域 跨域就是不同源，就是不满足协议、域名、端口都相同的约定 如：看下面的链接是否与 http://www.test.com/index.html...
vue框架学习 -- 跨域问题解决之 proxy 配置
dazhong2012的专栏
05-25 734
文件中的 devServer.proxy 配置来设置一个代理服务器。这个代理服务器会拦截特定的请求，并将其转发到目标后端服务器。通过上述配置，当Vue应用在开发过程中发出对 /api/xxx 的任何HTTP请求时，这些请求会被。在Vue.js项目中，为了在开发环境下解决跨域问题，我们可以利用 vue.config.js。从而绕过了浏览器的同源策略限制，使得前端应用能够与不同域名下的后端服务正常交互。// vue.config.js 文件。// vue.config.js 文件。
Vue中利用proxy代理解决跨域问题
aybaiwan的博客
07-25 2138
根据同源策略，浏览器只允许网页从同源网页加载资源，而不允许从不同源的网页获取或操作数据。'/dev': { // /dev表示拦截以/dev开头的请求路径。'^/dev': '' // 把/dev变为空字符。target: define.APIURl, // 跨域的域名。request.js （名字可以随意取） 文件中封装请求 ，并暴露出去（也是为了方便）
关于 VueCli中 devserve
weixin_69506221的博客
11-03 1086
每日一个知识点 第一天
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
01-19
vue-cli 3.x 的beta版本，基于iview做的公司的角色权限管理平台。...以上这篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
详解vue-cli脚手架build目录中的dev-server.js配置文件
10-18
Vue-cli是一个流行的Vue.js应用开发工具，它提供了很多默认配置来加速前端开发。在使用Vue-cli创建项目后，会发现项目中存在一个build目录。这个目录通常包含了项目构建相关的配置文件，包括dev-server.js，它是...
vue项目中使用webpack中的‘devServer.proxy‘配置解决代理跨域问题
qq_53985958的博客
06-29 430
条件场景：需要请求单独的后台服务器来获取数据，且配置了base api/base url ? 基础路径，发请求的时路径当中会出现配置的基础路径例：基于vue-admin-template模板进行二次开发，可在.env.development文件中进行/修改相关配置 需要使用到重写path的相应配置vue.config.js文件devServer:{proxy:{'/dev-api': {target: 'http://×××.××.×',pathRewrite:{'^/dev-api':''}}}.....
vue-cli 跨域问题代理解决方案：devServer配置
caoxinjian423的博客
10-04 1569
背景： 在我们使用Vue直接请求后端时，通常会报跨域问题，如下图： 要解决这个问题，方案有很多种，最简单的莫过于vue-cli的devServer配置。 devServer配置 在vue项目下创建vue.config.js文件，如下图： 在vue.config.js中写入devServer配置，例如： module.exports = { devServer: { proxy: { "/api": { target: "http:
新版的vue-cli没有dev-server.js文件
weixin_38183233的博客
06-26 316
当我跟着网上vue项目视频进行学习时，用到了axios创建代理来进行线上接口的数据抓取，由于vue对dev-server的更新，新版的vue-cli没有dev-server.js文件，而是直接把对应模块整合到了webpack.config.dev.js中， // 引入node.js中的express模块,简化操作 const express = require('express') const a...
devServer和VueCLI
浮游的博客
07-07 872
目前我们开发的代码，为了运行需要有两个操作：这个过程经常操作会影响我们的开发效率，我们希望可以做到当文件发生变化时，可以自动的完成编译和展示；为了完成自动编译，webpack提供了几种可选的方式：webpack给我们提供了watch模式：如何开启watch呢？两种方式：这里我们选择方式二，在package.json的 scripts 中添加一个 watch 的脚本： webpack-dev-server 上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的：安装webpack-dev
vue3+cli-service配置代理，跨域请求
liuzaixi的博客
06-04 422
在vue.config.js文件中。
新版vue-cli 没有dev-server.js
哼哼哼哼哼
07-30 811
新版本的vue中webpack.dev.conf.js 代替了之前的dev-server 再此之前需添加 axios 
vue项目配置多个Proxy代理
weixin_39964419的博客
11-29 1万+
vue项目如何配置多个Proxy代理
vue-cli设置proxy代理
热门推荐
HELLO WORLD
11-19 4万+
Proxy是什么？ proxy是ES6中就存在的，用于修改某些操作的默认行为，可以理解成在目标对象前设一个拦截层，因此也叫“代理器”。 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。 Proxy的语法 ES6 原生提供的 Proxy 语法很简单，用法如下： let proxy = new Proxy(target, handler); 如
不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 （配置详解）（三）webpack配置devServer，详细说明原理。
qq_31906983的博客
12-19 668
四、配置webpack-dev-server （1） 理解为什么要使用 webpack-dev-server 在上面一篇文章中，我们已经可以通过webpack去打包整个项目了，但是每次写完代码，都需要手动运行一下webpack执行打包，才能看到修改后的效果，这对于我们前端开发来说是十分不方便的。还有一点就是如果我们想发送一个ajax请求，那么必须要使用http协议，而直接打开本地文件使用的则是...
Vue-cli项目跨域配置：proxyTable详解
"vue-cli项目的proxyTable用于解决开发环境中API接口跨域的问题，主要涉及前端Vue.js框架和基于Node.js的脚手架工具vue-cli。跨域是由于浏览器的同源策略限制，不同源的资源之间无法直接交互。本文将详细探讨跨域的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值