vue设置代理不起作用问题及解决

目录
  • vue设置代理不起作用
    • 运行后发现报错404
  • vue配置代理方式
    • 正向代理配置
    • 环境变量配置文件
    • 目录

vue设置代理不起作用

使用vue写前端界面时，需调用后端接口展现查询的数据，于是设置代理实现跨域，在config/index.js中添加代理，代码如下：

proxyTable:{
      // 匹配 /dev-api 开头的请求， 比如：A网站：https://localhost:8888 中的index.html 页面发送AJax请求：/dev-api/data.json
      'dev-api': {
        target:'http://localhost:3001',
        // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
        // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true, //开启代理
        pathRewrite: {
            "^/dev-api": ''
        }
      }
    },

运行后发现报错404

测试后端接口无问题，着重看代理部分代码，百度后发现 “dev-api"前面应加”/"，

否则会出现上述错误。

完整代码如下：

proxyTable:{
      // 匹配 /dev-api 开头的请求， 比如：A网站：https://localhost:8888 中的index.html 页面发送AJax请求：/dev-api/data.json
      '/dev-api': {
        target:'http://localhost:3001',
        // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
        // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true, //开启代理
        pathRewrite: {
            "^/dev-api": ''
        }
      }
    },

除此之外，修改代理后应重启一下，否则修改内容不生效。

vue配置代理方式

正向代理配置

环境配置文件 .env.development

ENV = 'development'
VUE_APP_BASE_API="/dev-api"

vue配置文件 vue.config.js

devServer: {
    proxy:'http://localhost:8080'//所有的接口请求都会被代理到这个路径上
},
devServer: {
    proxy:{
        '/dev-api':{//只要是这个路径下的请求都会被代理到target中
            target:'http://localhost:8888',
            pathRewrite:{'^/dev-api':''}//路径重写：/dev-api路径将不会出现，如果改成'^/dev-api':'test'，则重写的路径/dev-api会变成test
        }
    }
},

注意点：使用正向代理时，不要手动的写全路径，不要手动的写全路径，不要手动的写全路径，（重要的事情说三遍）写了全路径则代理失效

全路径：http://localhost:8080 即：协议、域名、端口

只要写一个代理路径即可：VUE_APP_BASE_API =/dev-api

环境变量配置文件

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
# mode 代表环境变量：development、production和test。不同的文件名在不同的环境下自动生效

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

这是为了避免意外公开机器上可能具有相同名称的私钥。

目录

.env.production//生产环境配置
.env.develoption//开发环境配置

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决VueCil代理本地proxytable无效报错404的问题

    前言 因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人: 正文 1. 为什么要使用代理? 代理的作用是:把请求代理转发到其他服务器的中间件: 例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • Vue使用Proxy代理后仍无法生效的解决

    vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑: 配置完代理后请一定重新执行(重要,非常重要!) npm run dev 若重新执行命令后,代理仍为生效,请按下方步骤进行检查: 检查index.js文件中的代理是否配置正确,示例如下: proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx.xxx',//指向的实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { // 标识替换 // 原

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • vue设置代理不起作用问题及解决

    vue设置代理不起作用问题及解决

    目录 vue设置代理不起作用 运行后发现报错404 vue配置代理方式 正向代理配置 环境变量配置文件 目录 vue设置代理不起作用 使用vue写前端界面时,需调用后端接口展现查询的数据,于是设置代理实现跨域,在config/index.js中添加代理,代码如下: proxyTable:{ // 匹配 /dev-api 开头的请求, 比如:A网站:https://localhost:8888 中的index.html 页面发送AJax请求:/dev-api/data.json 'dev-api'

  • vue 设置proxyTable参数进行代理跨域

    什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>.<script>.<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!.现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了

  • vue代理和跨域问题的解决

    一.安装vue-resource插件 cnpm install vue-resource --save 在根目录下的package.json检查一下插件的版本 在rourer-index.js下引入文件 import Resource from 'vue-resource' Vue.use(Resource) 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http 参考链接 二.安装axios插件 cnpm install --save axi

  • vue设置动态请求地址的例子

    需求:在开发和生产环境下,请求不同的地址(http or ws),使其置入线上环境,无论是什么域名都不用手动更改请求地址 思路:使前端请求接口地址简单化 上代码:在vuex中设置总的接口地址,然后在生产和开发环境下配置不同的地址 export const configUrl = { url: process.env.API_HOST, ws: process.env.API_WS } 然后在config文件夹中,设置dev.env.js和prod.env.js module.exports =

  • VUE设置和清除定时器的方式及遇到的问题

    目录 方法一.在生命周期函数beforeDestroy中清除 方法二.使用hook:beforedestroy(推荐) 三.beforeDestroy函数没有触发的情况 1.原因 2.解决方案 附:vue离开页面销毁定时器 总结 方法一.在生命周期函数beforeDestroy中清除 data() { return { timer: null; }; }, created() { // 设置定时器,5s执行一次 this.timer = setInterval(() => { console.l

  • Docker设置代理的方法教程

    在一些实验环境,服务器没有直接连接万网的权限,需要通过网络代理:通常情况下将网络代理直接配置在/etc/envrionment./etc/profile之类的配置文件中,这对于大部分操作都是可行的.然而,docker命令却不能使用这些代理.最典型场景就是docker需要从外网pull镜像: 下面推荐一种方法,修改后会一直生效,该方法覆盖了默认的docker.service文件: 1.为docker服务创建一个内嵌的systemd目录 mkdir -p /etc/systemd/system/do

  • 分享java中设置代理的两种方式

    分享java中设置代理的两种方式

    1 前言 有时候我们的程序中要提供可以使用代理访问网络,代理的方式包括http.https.ftp.socks代理.比如在IE浏览器设置代理. 那我们在我们的java程序中使用代理呢,有如下两种方式.直接上代码. 2 采用设置系统属性 import java.net.Authenticator; import java.net.PasswordAuthentication; import java.util.Properties; public class ProxyDemo1 { public

  • 详解为 Docker 设置代理

    因为众所周知的原因,Docker在国内的使用举步维艰.于是,很多组织在国内提供了mirror或者叫加速器. 甚至在1.13的release note中提到微软提供了官方的中国镜像,然后我并没有找到怎么启用,找到了再写. 使用这些镜像或者加速器,拉取各种官方镜像是ok了,自有的镜像也可以放在国内的registry. 但是官方镜像只是沧海一粟,大量的组织或个人的镜像都在docker hub,这一部分并没有被镜像同步. 于是,你还是需要一个代理. 本文假设: 你已经有一个http代理了 Linux发行

  • git使用.gitignore设置不生效或不起作用问题的解决方法

    偶然遇到的问题,记录如下: 通常我们在push项目时,会有些配置文件或本地文件不想上传到服务器上 这时候我们会通过设置.gitignore  文件 一般设置成这样: ################### *.com *.txt *.class *.dll *.exe *.7z *.gz *.iso *.jar *.rar *.tar *.zip *.log *.sql *.sqlite *.pyc *.excude *.bak config.* .idea .DS_Store* ehthumb

随机推荐