Vue使用新建vue.config.js配置proxy后无法识别代理

最新推荐文章于 2024-05-14 18:17:08 发布
最新推荐文章于 2024-05-14 18:17:08 发布
阅读量6.3k 收藏 6
点赞数 4
分类专栏： 前端学习 文章标签： vue.js 前端 nginx反向代理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongdamrgao/article/details/111415928
版权

近期在写项目时遇到了常见的跨域问题，打算使用反向代理的方式解决，尝试了网上很多方法都没有配置成功，始终无法识别代理。最终自己摸索出了解决方法。

解决方法

  1. 修改config/index.js文件中proxyTable:{}项。
    Target为目标地址
    ‘/api’可替换为其他，需要保持一致
    在这里插入图片描述

  2. 修改config/dev.env.js文件中在NODE_ENV:’”development”’,后添加BASE_API: ‘”/api”’ ，这里注意与上一步保持一致。
    在这里插入图片描述

  3. 配置请求的根路径，修改src/main.js文件，axios.defaults.baseURL = process.env.BASE_API;
    在这里插入图片描述

TripleGold.
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue-cli3中vue.config.js配置教程详解
12-07
前言 vue-cli3推崇零配置，其图形化项目管理也很高大上。 但是vue-cli3推崇零配置的话，导致了跟之前vue-cli2的配置方式都不一样了。 别名设置，sourcemap控制，输入文件位置和输出文件位置和输出的方式，压缩js控制，打包webapck日志分析，externals忽略配置（外部引入），调试的端口配置，proxy接口配置等等的。 有时候还需要我们配置的，因为官方推荐的，并不适用于我们平时的开发所用的。 所以，我的vue.config.js配置是下面这样的。还有一个改hash的配置，暂时还不知道如何配置，以后会解决的，解决的时候顺便更新这里。 资料查询借鉴地址： https:
vue.config.js完整配置-超详细
05-26
在 Vue 项目中，`vue.config.js` 文件是一个可选的配置文件，它允许开发者自定义项目的各种设置，以满足特定需求。这个文件通常位于项目的根目录下，如果使用了 `@vue/cli` 创建的项目，那么在初始化时该文件可能不...
vue-cli搭建vue项目config/index.js对proxyTable进行配置
yhj198927的博客
04-08 1279
配置如下： // 配置后台代理 proxyTable: { '/api': { target: 'localhost:9000', secure: false, pathRewrite: { '^/api': '/api' }, changeOrigin: true } } 说明： （1）target：本地测试环境请求后台接口的域名ip （2）s
初学采坑：vue3中配置文件vue.config.js不生效
最新发布
qq_26264187的博客
05-14 563
发现Vue 3 在使用 Vite 作为构建工具，所以跨域配置应在。刚学完配置vue.config.js。经检查package.json文件。配置完成重启，访问成功。
vue跨域：proxyTable功能
viviliving的专栏
08-31 387
config目录下index.js // see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.
vue2 跨域问题 proxy反代理
半梅芒果干的博客
05-08 952
vue.config.js module.exports = { devServer: { proxy: { '/api': { target: '访问的接口域名', changOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' } } } }, ] 2.utils/request.js // create an axios instance const service = axios.cre.
关于Vue中的请求转换代理
qq_37107524的博客
01-27 459
关于Vue中的请求转换代理 前端使用的是vue后端使用的是springboot，而我在进行前后端分离时通过axios进行跨域。 所遇到的问题 本来想直接在前端配置请求转换代理。定义了一个config.js let proxyObj = {}; proxyObj['/'] = { ws: false, target: 'http://localhost:8081',//后端地址 cha...
vue3 vue.config.js配置
juse__we的博客
10-10 2749
https://cli.vuejs.org/zh/config/#pages
vue - vue.config.js中devServer配置方式
10-16
在Vue.js开发过程中，`vue.config.js` 文件是用于配置项目的，特别是对于开发环境的设置。其中，`devServer` 配置对象是至关重要的，因为它控制着开发服务器的行为，包括如何处理跨域请求、代理服务器设置以及端口...
Vue-cli3项目配置Vue.config.js实战记录
10-18
相比之前的版本，Vue CLI 3 在项目结构上进行了简化，不再包含 `build` 和 `config` 文件夹，而是将大部分配置集中到了 `vue.config.js` 文件中。这个文件位于项目的根目录下，允许开发者自定义 Webpack 配置，以...
vue.config.js常用配置详解
10-15
大部分配置现在都在项目的根目录下通过 `vue.config.js` 文件进行管理。下面我们将详细介绍 `vue.config.js` 中的常用配置。 1. **基本路径 (publicPath)**: - `publicPath` 替代了已废弃的 `baseUrl`，用于指定...
vue配置本地代理解决跨域问题并配置不同环境改变target
github_38928905的博客
12-18 3947
我的vue搭建用的脚手架。 首先，在config下新建一个文件proxyConfig.js module.exports = { proxy: { '/api': { target:'http://www.jinbi.com', // 需要跨域的接口ip(域名)http://xxx changeOrigin:true,//是否跨域 pathR...
vue4的vue.config.js解决跨域问题时，proxy的target无效原因
Avery_xu的博客
10-20 4795
vue4的vue.config.js解决跨域问题时，proxy的target无效原因 首先配置内容 // An highlighted block // 跨域配置 module.exports = { devServer: { //记住，别写错了devServer//设置本地默认端口 选填 port: 9876, proxy: { //设置代理，必须填 '/api': {
Vue 代理解决跨域
weixin_45791806的博客
09-27 189
如图找到config文件夹里面的index文件： 再找到index.js里面的proxyTable： //豆瓣电影里面的API某个接口 proxyTable: { '/Api': { target:'https://movie.douban.com/', // 你请求的第三方接口 changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
vue-cli3没有config文件解决方案，在根目录加上vue.config.js文件
w36680130的博客
09-08 2353
vue-cli3没有config文件解决方案，在根目录加上vue.config.js文件
vue3配置vue.config.js文件后内容不生效
qq_41988113的博客
04-26 4536
问题：我们写路径方便，会给一些路径起别名，vue-cli3需要自己对vue.config.js文件进行配置，但是发现更新完之后vue.config.js内容不起效果 module.exports = { configureWebpack: { resolve: { alias: { // 脚手架3中起别名可以用@代替src 'assets': '@/assets', 'common': '@/common', 'co
vue.config.js 配置proxy代理axios请求无效问题解决方案
热门推荐
飞扬小阁
12-23 1万+
使用proxy代理请求地址，可以帮助隐藏http请求地址，并可解决跨域请求的问题 试了很多方法开发环境无效。 vue.config.js配置(不要配置其他多余的选项，只要proxy) devServer: { port: 8088, proxy:"http://192.168.111.101:8081" // 下方配置无效，已屏蔽 /* proxy: { '/api': { target: "http://192.168.111.101:8
是vite.config.js吧，还是vue.config.js
07-28
非常抱歉，我之前的回答有误。对于 Vue 3 + Vite 项目，你需要在根目录下的 vite.config.js 文件中配置别名，而不是 vue.config.js。 以下是一个示例的 vite.config.js 文件配置，用于在 Vue 3 + Vite 项目中使用绝对路径@： ```javascript import { defineConfig } from 'vite'; import path from 'path'; export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src') } } }); ``` 请确保在配置别名后重新启动 Vite 项目，以确保配置生效。希望这次能解决你的问题！如果还有其他疑问，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值