vue-cli 配置了通过代理跨域请求，为什么不生效？

最新推荐文章于 2024-08-12 13:22:54 发布
最新推荐文章于 2024-08-12 13:22:54 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： 报错解决 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QiuHaoqian/article/details/105716071
版权

proxyTable配置vue代理跨域请求不生效

报错：
I Your application is running here: http://localhost:8080
[HPM] Error occurred while trying to proxy request /index_category from localhost:8080 to http://localhost:4000 (HPE_INVALID_VERSION) (https://nodejs.org/api/errors.html#errors_common_system_errors)

config/index.js文件中的配置
在这里插入图片描述

请求如下
在这里插入图片描述

网页报错
在这里插入图片描述

可以发现网页还是请求的8080，代理并没有起作用啊？

vue 控制台报错
在这里插入图片描述

百度了好久也没有解决，求教

浩骞
关注
专栏目录
vue cli3 配置proxy代理无效
我的博客
04-12 3万+
vue cli3 创建的vue项目配置开发环境代理无效，网上的各种配置都试了，还是不行，最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项，什么changOrigin pathRewrite 之类的东西都不要配)： module.exports = { devServer: { proxy:"http://127.0.0.1:...
proxytable代理不生效_vue-cli之webpack的proxyTable无效的解决方案
weixin_29752389的博客
12-24 1573
最近遇到这个需要单页访问跨域后台的问题可以按照如下设置：proxyTable: {'/list': {target: 'http://api.xxxxxxxx.com',pathRewrite: {'^/list': '/list'}}}这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.那么又是如何解决跨域问题的呢？其实在上面的'list'的...
关于在vue中axios跨域问题没反应的问题
不想内卷的博客
02-20 3546
之前按照网上的教程走了一遍发现没有实现，于是在经历了一天的闷棍后，终于找到了实现方法。果然解决方法比较懵逼。以后还需努力学习。 现在发一遍网络上同用的教程。 1.首先引入包 npm install axios -s 2.在主文件夹下创建vue.config.js文件，输入以下代码 module.exports={ //打开vue官网 vue cli查看vue.config.js配置。 //vue脚手架全部打包好了，你想要啥东西都可以在这里配置，不能直接里面配置 lintOnSave
vue 解决跨域
最新发布
weixin_68187288的博客
08-12 448
如果你有多个需要代理的路径，可以使用更复杂的配置对象，如示例中的 `proxy` 对象。如果你使用的是 Vue CLI（通常是通过 `vue create` 创建的项目），你可以在 `vue.config.js` 文件中配置代理。在这个配置中，所有发往 `/api` 的请求都会被代理到 `http://localhost:5000`，并且路径中的 `/api` 部分会被去掉。2. 在你的服务器文件中（例如，`server.js` 或 `app.js`），配置代理中间件： ```js。
关于Vue-Cli proxy 不生效的问题
风吹稻花香的博客
08-20 7180
前端开发中经常会遇到调后端接口跨域的问题，解决方法有很多，这里不做介绍了，（有兴趣的可以去这里看看：https://juejin.cn/post/6844904126246027278#heading-44） 今天主要说下Vue-Cli 中的代理，因为看到好多人按照官方文档配置，结果却不生效，为什么会这样呢，无外乎配置的不正确。 先看下官方的文档： devServer.proxy Type:string | Object 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需.
Vue-cli跨域失效
weixin_44328686的博客
11-03 463
前言： 原本是在完成老师布置的一个使用Vue-cli跨域axion访问淘宝接口的任务。结果跨域的时候出现了问题 问题： 我在开启跨域修改axion原本访问的路径后，访问接口报错404，一开始我一直以为是路径的问题 解决过程： 等我吃完晚饭后还特地回去找了一篇关于Vue-cli使用vue.config.js文件进行配置跨域基本原理的视频(之前并没有接触过跨域)，从而得知：跨域的原理是配置一个拦截器，当发送请求的路径出现与拦截条件相同的字段时，会进行拦截，之后将请求路径进行一个替换。之后我沉思萌生了一个可能性：
vue项目，proxy代理失效，解决方案
热门推荐
qq_57260058的博客
02-22 2万+
proxy，代理失效
Vue-Cli配置代理转发解决跨域问题
小王的技术库
08-22 361
这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。配置文件中，有一项是devServer，它就是我们下边要操作的主角。ajax的基地址baseUrl必须是相对地址，而不能是绝对地址。在前端服务和后端接口服务之间 架设一个中间代理服务，它的。
Vue-cli解决跨域问题--配置代理服务器
linmuqi0928的博客
04-18 1393
前置知识 常用发送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-cli的proxy代理解决跨域问题
XH_web_novice的博客
12-22 206
vue-cli的proxy代理解决跨域问题,
vue-cli3跨域配置的简单方法
10-16
**配置 Vue CLI 3 跨域** 1. **创建配置文件**： 首先，在项目根目录下创建一个名为 `vue.config.js` 的文件。这个文件允许你自定义 Vue CLI 的配置。在这个文件中，你可以配置 `devServer` 属性来设置代理： ``...
vue cli3 配置proxy代理无效的解决
10-16
在Vue CLI 3中，开发过程中常常需要配置代理来解决跨域问题，使得前端应用能够与后端API接口进行通信。然而，有时按照常规方法配置`proxy`后，可能会遇到代理无效的情况。本文将详细解释如何正确配置Vue CLI 3的`...
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
这是因为Vue-cli默认的配置是将静态资源文件放置在服务器的根目录下，而直接通过***协议访问静态文件夹时，Web服务器的一些特性（如HTTP缓存、跨域策略等）不会生效，从而无法正确加载资源。 为了解决这个问题，Vue...
Vue-cli4脚手架开发有关Axios的跨域解决方案
weixin_43736435的博客
04-19 2315
我们常在Vue中用Axios来发送请求，但Axios本身并不能跨域，需要额外的配置 1、安装Axios $ npm install axios 2、在main.js中导入配置axios import Axios from 'axios' Vue.prototype.$axios = Axios 3、需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题 ...
vue-cli代理服务器
weixin_45162984的博客
02-16 426
vue-cli代理服务器配置详解 在vue.config.js中写如下配置 module.exports = { devServer: { proxy: { // /api为代理服务器前缀，例如项目中的请求地址为http://location:8080/api+参数 '/api': { target: '<url>', // 需要请求服务器地址 pathRewrite: {'^/api',''}, // 将请求地址中api替换为空
i your application is running here: http://localhost:8080
m0_53553562的博客
05-07 2526
Vue 中 npm run dev 运行 报错 i your application is running here: http://localhost:8080 解决方法： 将autoOpenBrowser:false ;改为true
记录vue配置跨域不起作用以及一些理解
qq_48445738的博客
09-15 3667
http://127.0.0.1:4050/http://127.0.0.1:4050/test 很显然是不对的。1.请求路径写了全路径 这样就是错的 你如果写了全地址 代理的时候变成了。每次搜跨域 都会出来proxytable和proxy 这俩的区别。先看一组标准的配置及请求(请求方式不一样不用管 地址差不多就行)其实你可以看着 当我们碰到请求中带有/api的时候 我们自动带上。不用怀疑自己 这样配置是绝对没问题的 这样我们是成功的。vue-cli3.0以后使用的proxy。
项目搭建后启动时无法自动打开浏览器 Your application is running here:
jiuweiyaoy的博客
09-18 1万+
Your application is running here 您的应用程序正在此处运行 解决方法： 找到项目的config文件 打开index.js, 值改为 true  再重新输入npm run dev 项目就可以自己在浏览器中打开了...
运行vue项目，出现Your application is running here: http://localhost:8080
weixin_43267086的博客
02-15 2541
把config文件下的autoOpenBrowser: false,改为true就ok了
vue-admin-template配置跨域无效
07-29
引用\[1\]中的代码是一个Vue项目的配置文件，其中包含了关于跨域的配置。在这个配置中，使用了Vue CLI提供的proxy选项来代理接口转发流量。通过设置target属性来指定后端接口的地址，同时设置changeOrigin为true来开启代理。在pathRewrite中可以对请求路径进行重写。这样配置之后，前端发送的请求会被代理到指定的后端接口地址，从而解决跨域问题。但是需要注意的是，这个配置只在开发环境下有效，生产环境下需要在服务器端进行相应的配置。 引用\[2\]中的代码是另一种跨域配置的示例。在这个示例中，使用了相似的proxy选项来进行代理配置。通过设置target属性来指定后端接口的地址，同时设置changeOrigin为true来开启代理。在pathRewrite中可以对请求路径进行重写。这样配置之后，前端发送的请求会被代理到指定的后端接口地址，从而解决跨域问题。需要注意的是，这个示例中的配置是在vue.config.js文件中进行的，而不是在.env.development文件中。 引用\[3\]中的代码是一个使用axios发送请求的示例。在这个示例中，通过import语句引入了封装好的request模块，然后通过调用该模块的方法来发送请求。在getHospSetList方法中，使用了request方法发送了一个POST请求，并传递了请求的URL、请求方法、请求头和请求数据。这样就可以通过调用该方法来发送请求并获取响应数据。 根据你提供的信息，如果你在vue-admin-template项目中配置跨域无效，可能有以下几个原因： 1. 配置文件中的proxy选项没有正确设置，比如target属性没有指定正确的后端接口地址。 2. 配置文件没有被正确加载，比如文件名不正确或者位置不正确。 3. 项目没有重新启动，配置文件的修改需要重新启动项目才能生效。 4. 生产环境下的跨域配置没有进行相应的服务器端配置。 请检查以上几个方面，确认配置文件正确加载并且配置项设置正确，然后重新启动项目，看看是否能够解决跨域问题。如果问题仍然存在，请提供更多的信息以便我能够更好地帮助你解决问题。 #### 引用[.reference_title] - *1* *3* [vue-admin-template 解决跨域问题](https://blog.csdn.net/weixin_43980468/article/details/123714861)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue-admin-template解决前端跨域问题---简单快速（vue-cli3）](https://blog.csdn.net/weixin_45116146/article/details/121494398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值