vue中如何配置proxy代理

目录
  • vue配置proxy代理
    • proxy常用参数说明
    • 关于/api的详解
    • 部署因为/api无法请求到数据
  • 总结

vue配置proxy代理

如果你的前端应用和后端 API 服务器没有运行在同一个主机上（即解决跨域问题，用proxy代理请求一下），你需要在开发环境下将 API 请求代理到 API 服务器。

这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

将

转发到

https://apimusic.linweiqin.com

app.vue文件

<template>
  <div id="app">
    <h1>hello Vue cli</h1>
    <HelloWorld></HelloWorld>
  </div>
</template><script>
/* @ => src */
// import HelloWorld from "./components/HelloWorld.vue";
import HelloWorld from "@/components/HelloWorld.vue";
/* 1. 引入 axios 请求库 */
import axios from "axios";
/* 组件的配置项 */
export default {
  created() {
    // axios
    //   .get("song/url?id=504835560")
    //   .then((res) => {
    //     console.log(res);
    //   });
    axios
      .get("/song/url?id=504835560")
      .then((res) => {
        console.log(res);
      });
    axios.get("/api/s/getHotProducts").then(res=>{
      console.log(res);
    })

  },
  name: "App",
  components: {
     HelloWorld
  },
};
</script><style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在 vue.config.js 文件中添加如下所示的配置项

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: "https://apimusic.linweiqin.com/"
  }
};

如果请求有多个不同的地址

A: http://s.linweiqin.com/api/s/getHotProducts

B: https://apimusic.linweiqin.com/song/url?id=504835560

module.exports = {
  lintOnSave: false,
  //   devServer: {
  //     proxy: "https://apimusic.linweiqin.com/"
  //   }
  devServer: {
    proxy: {
      "/song": {
        target: "https://apimusic.linweiqin.com/",
        // changeOrigin: true,
      },
      "/api": {
        target: "http://s.linweiqin.com/",
      },
    },
  },
};

proxy常用参数说明

module.exports = {
    publicPath: "/",
    devServer: {
        proxy: {
            "/api": {
                // 代理名称   凡是使用/api开头的地址都是用此代理
                target: "http://1.2.3.4:5000/", // 需要代理访问的api地址
                changeOrigin: true, // 允许跨域请求
                pathRewrite: {
                    // 重写路径，替换请求地址中的指定路径
                    "^/api": "/", // 将请求地址中的/api替换为空，也就是请求地址中不会包含/api/
                },
            },
        },
    },
};

关于/api的详解

‘/api’：是指遇到这个字符开头的话，在这个字符前面加上target里面的ip或者域名。

举例：

①登录接口：http://1.2.3.4:5000/login

…中间省略了配置过程…

②npm run serve:Local: http://localhost:8080/

③点击后发送的登录请求：http://localhost:8080/api/login

④/api 的作用就是将/api前的localhost：8080变成target的内容http://1.2.3.4:5000/

⑤完整的路径变成了http://1.2.3.4:5000/api/login

⑥实际接口当中没有这个api，所以pathwrite重写就解决这个问题的。

⑦pathwrite识别到api开头就会把/api重写成空，那就是不存在这个/apil了，完整的路径又变成：http://1.2.3.4:5000/login

部署因为/api无法请求到数据

接口名称不用/api，改用实际接口的第一个字段，然后取消pathwrite重写

总结

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

赞 (0)

相关推荐

  • webpack+vue-cil 中proxyTable配置接口地址代理操作

    在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可: dev: {

  • vue跨域proxy代理配置详解

    vue跨域proxy代理配置详解

    目录 引言 例一 例二 总结 引言 相信很多人都用过proxy,这里就不多说proxy的基本使用,这里要说一下很多人使用proxy的一个误区,大家一般都是直接将管官方的例子拿过来,修改一下代理目标直接就是用了,但是代理的路径匹配你真的会用么? 如果你能够认证看完那么我保证你下次再配置代理的时候就能一步就能完成,无需多次npm run serve 先来一个正则热热身待会需要用,看懂了再往下看: 例一 这是我使用express自己搭建的一个超级简单的服务器,代码如下(没有设置允许跨域请求) // 引

  • vue之proxyTable代理超全面配置流程

    vue之proxyTable代理超全面配置流程

    目录 前言 介绍 配置分离 1. config.dev.js 2. proxyTableHandler.js 效果如下 前言 用了vue有一年多了,从最初的摸着石头过河到现在已经能熟练的使用vue开发项目,学到了许多,特别是vue的代理配置让我眼前一亮,甚是喜欢,故将自己对proxyTable代理配置整理出来,供致力于的开源的同辈浏览,望大家手下留情,哈哈_. 介绍 vue的proxyTable是用于开发阶段配置跨域的工具,可以同时配置多个后台服务器跨越请求接口,其真正依赖的npm包是http-

  • vue服务器代理proxyTable配置如何解决跨域

    vue服务器代理proxyTable配置如何解决跨域

    目录 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 2 .常见情况 3.应用方式 4.具体配置实例 5.配置思路 Vue.proxyTable是什么? 为什么会有proxyTable存在? 配置proxyTable 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求(没有匹配到静态文件的请求),代理到一个另一个地址,从而解决跨域的问题. 2 .常见情况 前端在向后端进行资源请求的时候,后端若

  • Vue代理报错404问题及解决(vue配置proxy)

    目录 Vue代理报错404问题 第一种路径拼接 /api 情况 第二种路径不变情况 注意点 新增说明:配置多个代理怎么搞? 总结 Vue代理报错404问题 问题描述: 代理后出现404: 第一种路径拼接 /api 情况 const path = require('path'); function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { publicPath: process.env.NODE_

  • 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配置proxy代理 proxy常用参数说明 关于/api的详解 部署因为/api无法请求到数据 总结 vue配置proxy代理 如果你的前端应用和后端 API 服务器没有运行在同一个主机上(即解决跨域问题,用proxy代理请求一下),你需要在开发环境下将 API 请求代理到 API 服务器. 这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置. 将 转发到 https://apimusic.linweiqin.com app.vue文件 <

  • Vue中如何实现proxy代理

    Vue 框架开发的时候,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用proxy 代理. // config/index.js 文件 proxyTable: { '/api': { target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号 changeOrigin: true, // 跨域 pathRewrite: { '^/api': '/' } } }, 这里理解成用'/api'代替targe

  • nuxt.js服务端渲染中axios和proxy代理的配置操作

    需要npm axios? 刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效.但在使用时并不方便.尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样. 后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置. 以上是百度到的,发现老是报错,现在网上的教程完全是在扯淡,npm axios 是不需要安装了,但是 @nuxtjs/axios 要安装啊 第

  • 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 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • vue中defineProperty和Proxy的区别详解

    vue中defineProperty和Proxy的区别详解

    Proxy的出现,给vue响应式带来了极大的便利,比如可以直接劫持数组.对象的改变,可以直接添加对象属性,但是兼容性可能会有些问题 Proxy可以劫持的数组的改变,defineProperty 需要变异 defineProperty 中劫持数组变化的变异的方法 可以理解为在数组实例和原型之间,插入了一个新的原型的对象,这个原型方法实现了变异的方法,也就真正地拦截了数组原型上的方法 我们来看下vue2.x的源码 // vue 2.5.0 var arrayProto = Array.prototy

  • vue中的proxyTable反向代理(亲测有用)

    vue中的proxyTable反向代理(亲测有用)

    目录 proxyTable反向代理 1.打开vue项目->config->index.js 2.打开一个vue页面 3.npm run dev 反向代理的实现原理 实现原理 程序运行过程 proxyTable反向代理 proxyTable的设置网上有的是,以前也没管过,但新公司的项目需要用到,所以就彻底研究一下,结果绕了好大的弯子! 注:每次设置完proxyTable,请一定要重启,刷新不好使   npm run dev! 开始前,请劳记上面操作,我就在这绕了很大的弯,一直以为页面刷新就行了,

  • 代码分析vue中如何配置less

    安装 npm install --save-dev less less-loader npm install --save-dev style-loader css-loader 先在index.html页面head标签内插入这段代码 <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' :

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

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

  • vue中proxy代理的用法(解决跨域问题)

    目录 声明 1. 首先我们应该知道 2. 跨域,什么是跨域呢? 问题 跨域的解决方案 代理服务器是如何解决跨域的? proxy配置 以vue cli3.0为例 总结 声明 1. 首先我们应该知道 前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说: axios.get('/login') axios.get('/hello') 当我点击发送按钮之后,以上两行代码实际为: http://localhost:8080/login http://localh

随机推荐