VueCli3.0 + axios反向代理解决跨域问题

最新推荐文章于 2025-08-29 14:19:33 发布
原创 最新推荐文章于 2025-08-29 14:19:33 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Vue项目中使用http-proxy-middleware配置代理，通过在vue.config.js中设置devServer属性来实现跨域请求。该方法可以将所有以/api开头的请求自动代理到目标域名下，同时解决浏览器跨域问题。

安装 npm install http-proxy-middleware

使用在 vue.config.js 文件中添加如下代码

devServer: {

        // 设置代理

        proxy: {

          "/api": {

            target: "XXXXX", // 域名

            ws: true, // 是否启用websockets

            changOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

            pathRewrite: {

              "^/api": "/api"

            }

          }

        }

}

 

配置的反向代理会将所有以 /api开头的请求自动代理到 XXXX下，但是对浏览器来说请求的地址是localhost:8080（默认地址），因此可以解决跨域问题。

使用后发现发送的请求前面都会带有 /api ，在pathRewrite里将/api写为“”即可
测试请求

小楠哥！
关注
最详细教程Vue3.0 脚手架配置（TypeScript+less+px转rem+反向代理+axios+Vuex）
weixin_56529964的博客
07-19 2289
你需要安装好vue-cli脚手架 注意：该文章只针对与vue-cli版本为 查看自己vue版本 vue-V 文章内容比较长(保姆级别教程)，全是干货，请耐心看完
vue-cli@3.0使用Axios插件记录及本地代理配置
reffrselom的博客
07-18 626
vue-cli@2.0版本时，一直在用vueResource，但似乎axios呼声更高。所以vue-cli@3.0决定使用axios试试。 3.0版本的插件安装方式有所改变：vue add xxx 下面按照操作顺序来说： 1.安装axios插件安装及使用 vue add axios 安装成功后，终端提示已更新package.json/package-lock.json/plugins/axios...
axios解决跨域问题（vue-cli3.0）
wangchaoqi1985的博客
09-09 182
axios解决跨域问题（vue-cli3.0）
Vue3.0+Vite+Ts项目，集成 Axios
最新发布
nvkdnx的博客
08-29 509
本文介绍了在Vue3.0+Vite+Ts项目中配置Axios的方法。主要内容包括：1）安装axios依赖；2）配置请求基础路径、响应状态码等基础信息；3）创建axios实例并设置请求/响应拦截器；4）封装GET/POST等常用请求方法；5）创建api模块与后端交互；6）测试配置的正确性。文章提供了完整的配置代码示例，帮助开发者快速实现网络请求功能。
vue-cli3.0 axios跨域请求代理配置
qq_40544291的博客
05-02 1120
假设后端的请求地址: http://127.0.0.1:3000/admin/api 1.在根目录下创建vue.config.js文件(vue cli3.x以上版本是没有config文件的),代码如下: module.exports = { devServer: { // 设置代理 proxy: { '/api': { target: 'http:/...
vue反向代理解决跨域问题（vue 3.0，vue-cli3.0），vue-cli2.0在config下的index.js中配置，vue-cli3.0在根目录下创建vue.config.js配置
@微你
01-09 678
【注】反向代理用来解决前端跨域问题，vue-cli3.0移除了配置文件目录，config和build文件夹，没了config文件夹，跨域需要配置域名时，从之前的config/index.js 挪到了vue.config.js中，配置方法不变. 大致步骤：(本例的请求地址为：https://m.maoyan.com/ajax/movieOnInfoList?token) npm install --save axios 在vue.config.js文件（和package.json文件同级，需要自行创建）中进
Vue 3.0跨域问题使用代理解决方法
xjh01的博客
03-16 518
最近用vue-element-admin框架，在访问阿凡达api和百度api的时候，会出现提示跨域问题。 搜索了半天，再通过自己尝试，总结如下： Vue 3.0为了解决跨域，使用了 http-proxy-middleware 。 在根目录下，有个vue.config.js文件，只需要在其中配置proxy项，就能解决跨域问题。so easy proxy: { "/locainfo": { //在...
【vue3.0】从零开始搭建TypeScript + less的px转rem + 反向代理 + axios + vuex
qq_50785995的博客
04-19 286
一、创建项目 Npm 修改下载源 1、找一个空白文件地址，在地址栏上输入cmd dos系统进入当前文件地址 dos系统中直接输入代码 npm config get registry 查看当前源 当前为淘宝镜像地址，如果你不是，需要修改当前npm 的下载源 修改npm 下载源 npm config set registry https://registry.npm.taobao.org 下载 cnpm ...
vue脚手架3.0使用axios
02-07
### 如何在Vue CLI 3.0中使用Axios进行HTTP请求 #### 安装依赖库 ...此时可通过 Nginx 反向代理的方式解决这个问题；另外建议配置多环境以便更好地管理开发、测试以及生产环境中不同的API地址[^3]。
Vue 3.0 脚手架配置 (TypeScript + less的px转rem + 反向代理 + axios + vuex )
weixin_56529686的博客
04-18 3920
Vue 3.0+TypeScript 脚手架配置
Vue3 + axios 前端跨域
m0_71126733的博客
04-04 807
同源策略是指在Web浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有相同的URI、主机名和端口号，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。因为浏览器内部有一种约定叫做同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。原文链接：https://blog.csdn.net/qq_41880073/article/details/123032642。那么什么叫做同源策略呢？
跨域 —— 反向代理配置
灵魂学者的博客
06-10 1532
本篇就来讲跨域中的反向代理配置，之前在Node栏目讲到可以通过后端的配置，使用cors配置解决跨域，或者可以使用jsonp解决跨域，以及还有另外一种实际情况，在本篇当中会有涉及。
全局配置axios、axios 拦截器 和 proxy 跨域代理
酷爱前端的小陈博客
05-19 6068
1. 在 vue3 的项目中全局配置axios 2. 在 vue2 的项目中全局配置 axios 需要在main.js 入口文件中，通过Vue 构造函数的prototype 原型对象全局配置 axios： 3. 什么是拦截器 拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。 应用场景： ① Token 身份认证 ② Loading 效果 ③ etc… 4. 配置请求拦截器 通过 axios.intercepto...
Vue中利用proxy代理解决跨域问题
aybaiwan的博客
07-25 2469
根据同源策略，浏览器只允许网页从同源网页加载资源，而不允许从不同源的网页获取或操作数据。'/dev': { // /dev表示拦截以/dev开头的请求路径。'^/dev': '' // 把/dev变为空字符。target: define.APIURl, // 跨域的域名。request.js （名字可以随意取） 文件中封装请求 ，并暴露出去（也是为了方便）
Vue3+axios+Vite配置Proxy代理解决跨域
yavlgloss的博客
11-05 1235
vite代理跨域代码书写
web前端vue框架配置反向代理看完这一篇秒懂~
零凌林的博客
12-31 3765
web前端在开发过程中。有的时候，我们遇到如下的跨域报警时，要么后端做一些措施，解决跨域的问题，比如（加cors请求头）。如果后端没有及时响应，这个时候就需要我们前端自己来解决跨域的问题。而反向代理就是我们web前端常用的解决跨域问题的有效手段之一。本次我们以vue框架为例，进行示范和记录反向代理的配置流程。
axios二次封装
至_臻的博客
06-29 558
第一步：在当前根目录下打开终端 下载axios npm install axios -S 第二步：新建一个vue.config.js文件 module.exports = { devServer: { proxy: { "/api": { target: 'http://www.ibugthree.com/', // 想要访问接口域名 changeOrigin: true, // 开启跨域,在本地创建一个...
Vue3.0中解决跨域代理问题
许魁的博客
02-05 7367
图文未动，代码先行： module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域名 changeOrigin: true, //是否跨域 ...
vue+axios配置代理解决跨域后报404
06-03
如果你在使用 Vue + Axios 进行跨域请求时出现了 404 错误，可能是代理配置有误导致的。 首先，你需要在项目根目录下的 `vue.config.js` 文件中进行代理配置，例如： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', // 代理目标地址 changeOrigin: true, // 开启代理 pathRewrite: { '^/api': '' // 将请求地址中的 /api 替换为空字符串 } } } } } ``` 以上代码表示将请求地址中以 `/api` 开头的请求转发到 `http://localhost:3000` 地址，开启代理并将请求地址中的 `/api` 替换为空字符串。 接下来，在 Axios 中发送请求时，请求地址应该写成相对地址，例如： ```javascript axios.get('/api/user') .then(response => { console.log(response) }) .catch(error => { console.log(error) }) ``` 以上代码表示发送一个 GET 请求到 `/api/user` 地址，因为我们在代理配置中已经将请求转发到了 `http://localhost:3000`，所以实际上会发送一个请求到 `http://localhost:3000/user` 地址。 如果你仍然遇到 404 错误，可能是因为代理目标地址配置有误，或者请求地址中的路径有误。你可以通过打印请求地址来检查请求是否发送到了正确的地址。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值