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

目录
  • proxyTable反向代理
    • 1.打开vue项目->config->index.js
    • 2.打开一个vue页面
    • 3.npm run dev
  • 反向代理的实现原理
    • 实现原理
    • 程序运行过程

proxyTable反向代理

proxyTable的设置网上有的是，以前也没管过，但新公司的项目需要用到，所以就彻底研究一下，结果绕了好大的弯子！

注：每次设置完proxyTable，请一定要重启，刷新不好使   npm run dev!

开始前，请劳记上面操作，我就在这绕了很大的弯，一直以为页面刷新就行了，但是，webpack好像很特别的存在一样，它不执行。好了，开始配置：

1.打开vue项目->config->index.js

并找到proxyTable属性

proxyTable: {
      '/api': { // '/api':匹配项
        target: 'http://192.168.31.167:8091', // 接口的域名
        // secure: false,// 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: { // 如果接口本身没有/api需要通过pathRewrite来重写了地址
          '^/api': '/'
        }
      }
    }

说明：具体如何跨域的，请自行查找

2.打开一个vue页面

设置一个按钮，和一个方法，注意请求url写法

http://192.168.31.167:8091/listUsers，这是我在本机用node.js写的一个简单的get请求，至于测试API，自行解决。

‘/api/listUsers’

/api   相当于   http://192.168.31.167:8091

webpack，会自动帮你转过去。

 handleTest() {
        let _this = this;
        //axios被挂到vue上了，做个全局
        _this.$axios.get('/api/listUsers')
          .then(function(response) {
            console.log(response);
          })
          .catch(function(error) {
            console.log(error);
          });

      },

3.npm run dev

去查看你的页面，并点击按钮

提示：跨域开发时，有两个选择

  • 后台把跨条件设置允许，具体实现问你的后台。那么前台就正常访问即可。（最简单，最暴力，但对于后台来说不安全）
  • 如果后台不设置，那前台必须得设置跨配置，也就是proxyTable配置。具体原理自己去搜webpack的proxy配置。
  • 一定要切记重启，npm run dev!!!

反向代理的实现原理

实现原理

反向代理需要用到nginx。反向代理是在服务器端进行处理。首先修改hosts文件，将域名指向开发者的电脑本身，把自己伪装成服务端，再通过nginx对不同的请求进行转发，把静态资源指向开发者本地电脑的资源，将接口指向实际的服务器。

可以理解为把饭店设置在了黑社会的楼下，去楼下买酱排骨饭的时候，饭店米饭自己做，酱排骨则偷偷跑去别的饭店买。

程序运行过程

浏览器访问页面，假设访问淘宝页面：taobao.com/index.html

taobao.com域名解析先经过hosts文件配置，发现taobao.com域名指向127.0.0.1，则向本机发起请求。

nginx接收到taobao.com/index.html请求，根据nginx的配置，将把这个请求转发给127.0.0.1:3000。

浏览器运行index.html文件，发起taobao.com/api/getNew请求

nginx接收到taobao.com/api/getNew请求请求，根据nginx的配置，将把这个请求转发给真正的淘宝服务器中。

淘宝服务器将数据返回给nginx，再返回给浏览器执行。

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

赞 (0)

相关推荐

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

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

  • 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

  • VueCli4项目配置反向代理proxy的方法步骤

    Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题. 以豆瓣电影首页的最近热门 为例: axios({ method: "get", url: "https://movie.douban.com/j/search_subjects", params: { type: "movie", tag: "热门", page_limit: 50, page_start: 0

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

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

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

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

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

  • 在vue中配置不同的代理同时访问不同的后台操作

    如果和不同的后台调接口,如果后台接口没有合到一起,前端可以配不同的代理来共同访问他们的接口 在config文件夹下的index.js中设置如下: proxyTable: { '/api/login': { // 第一个代理:此处的路径是所有接口前面相同的部分,用来匹配带有这部分路径的 target: "http://192.168.100.209:8910", changeOrigin: true, secure: false }, '/api/supplier': { // 设置第二

  • Java中Https发送POST请求[亲测可用]

    1.直接建一个工具类放入即可 /** * 发送https请求共用体 */ public static JSONObject sendPost(String url,String parame,Map<String,Object> pmap) throws IOException, KeyManagementException, NoSuchAlgorithmException, NoSuchProviderException{ // 请求结果 JSONObject json = new JSO

  • 在vue2 中使用 tailwindcss的方法 亲测可用

    在vue2 中使用 tailwindcss的方法 亲测可用

    目录 1. 直接安装 2. 创建文件tailwindcss.css 3.main.js中引入 4.在项目根目录执行以下命令: 5. 测试一下 注意 : 我用我走过的坑告诉你们 , 一定要按照步骤,一步一步来 1. 直接安装 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 2. 创建文件tailwindcss.css @import "tailwindcss/base&qu

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

  • 在Nginx服务器中配置mod_proxy反向代理的方法

    反向代理做法可以为网站安全做更高一步,像一些银行肯定是使用了反代理就是你进入代理服务器也得不到任何数据,下面我来介绍nginx用mod_proxy实现反向代理配置方法. 由于项目需要实现一个域名代理的功能 比如: 复制代码 代码如下: a.com/a.html=>b.com/b.html 也就是用a.com代理了所用b.com网站的请求,经过朋友介绍用apache的反向代理可以实现其目的,哥们试了一下,果然很爽.配置起来也超级的方便. (注意下面只介绍反向代理,正向代理等我用到了再介绍嘿嘿) 1

  • vue中如何配置proxy代理

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

  • VMWare中CentOS ifcfg-eth0配置方法(亲测直接可用)

    VMWare中CentOS ifcfg-eth0配置方法(亲测直接可用)

    这些配置是基于VMware Network Adapter VMnet8,假设我的VMware Network Adapter VMnet8 ip地址是192.168.106.1 具体如下图: 则我的ifcfg-eth0文件配置如下: DEVICE=eth0 TYPE=Ethernet UUID=f9f0898c-bf2c-4183-857a-eab291cd904d ONBOOT=yes NM_CONTROLLED=yes BOOTPROTO=static IPADDR=192.168.106

  • Vue-CLI3.x 设置反向代理的方法

    最近在项目中使用了Vue CLI 3.0版本,项目中需要设置反向代理解决跨域问题,下面记录一下设置过程. 如何安装vue-cli3呢? 首先,你要有一个nodejs环境 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 其次,如果你之前安装了vue-cli的旧版本,那么你要做如下操作 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue

随机推荐