vue 利用proxyTable跨域详细教程，附带前后端实例

淩亂°似流年 2021-09-17 04:00 213阅读 0赞

配置目录：config>index.js  
配置：

proxyTable: {
          '/api': { //代理
            target: 'http://172.30.34.180:3000/',//服务端地址和端口
            changeOrigin: true,//启动代理
            pathRewrite: {//重写路径
              '^/api': ''
            }
          }
        },

测试代码前端代码：

<template>
      <div>
        <button @click="test">测试</button>
      </div>
    </template>
    <script>
    import axios from 'axios'
    export default {
      methods: {
        test () {
          axios.get('/api/').then(res => {
            console.log(res)
          })
        }
      }
    }
    </script>

测试后端nodejs代码片段：

var fn_index = async (ctx, next) => {
    
      console.log(html)
      ctx.response.body = {
        state: 200,
        data: {
          list: [{ userName: "张三", id: 3 }, { userName: "李四", id: 4 }]
        }
      };
      console.log(ctx.response)
    };

服务端端口3000  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]

成功跨域！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/1ce37c2cfdec4b1683beab138cb3e7fc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 springboot + vue 前后端分离解决跨域

解决前后端项目存在跨域的问题两种方法只能用一种，不然重复使用也会没有作用 1、controller层使用@CrossOrigin注解单个接口有效 ![在这

た入场券/ 2024年04月03日 09:38/ 0 赞/ 114 阅读

相关 vue跨域实现与原理（proxyTable）

1、实现 1.1、使用proxyTable代理 1.2、注意事项 2、proxyTable原理 1、实现使用vue搭建的项目在本地与后端联调时，因为是使用

不念不忘少年蓝@/ 2023年01月22日 14:56/ 0 赞/ 26 阅读

相关 Vue 2.x 如何利用proxyTable实现跨域请求（反向代理）

在项目运行的时候吗，不可缺少就是的设置反向代理的详细的文档 [http-proxy-middleware][] 下载的官方的脚手架打开文件的build/dev-s

布满荆棘的人生/ 2022年05月25日 01:13/ 0 赞/ 194 阅读

相关前后端如何跨域?

跨域是什么? 跨域就是跨协议,跨域名,跨端口; 跨协议:https//; 跨域名:yuanting.com; 跨端口:8080; (同源就

水深无声/ 2022年03月15日 13:22/ 0 赞/ 267 阅读

相关前后端分离--跨域

1、跨域问题springboot中需要解决添加 @CrossOrigin 注解 2、如果注解添加在启动类里面，可以访问，但是无法回应。需要添加在具体的类上，如controll

柔光的暖阳◎/ 2022年02月24日 14:58/ 0 赞/ 336 阅读

相关 vue proxyTable中跨域中pathRewrite配置

vue浏览器跨域问题和vue proxyTable中跨域中pathRewrite配置 vue浏览器跨域问题当浏览器报如下错误时，则说明请求跨域了。 localh

川长思鸟来/ 2021年09月28日 13:24/ 0 赞/ 412 阅读

相关 nginx实现跨域详细教程，附带前后端实例

去官网下载nginx 为了方便启动和关闭nginx,按照如图新建start.bat,stop.bat文件，双击即可在windows下启动、关闭nginx ![在这里插入图

￡神魔★判官ぃ/ 2021年09月17日 04:04/ 0 赞/ 156 阅读

相关 vue 利用proxyTable跨域详细教程，附带前后端实例

配置目录：config>index.js 配置： proxyTable: { '/api': { //代理 targe

淩亂°似流年/ 2021年09月17日 04:00/ 0 赞/ 214 阅读

相关 vue2.0 proxyTable配置，解决跨域

vue浏览器跨域问题及解决办法当浏览器报如下错误时，说明请求跨域。 localhost/:1 Failed to load http://[www.thenewstep.

迈不过友情╰/ 2021年09月16日 08:52/ 0 赞/ 552 阅读

相关 vue中proxyTable反向代理进行跨域

一.分析 (一).jsonp的方式 <script>标签里的src是没有跨域限制的，<img>标签里的src也是没有限制的，我们书写网页的过程中不难发现这一点。jsonp就

谁践踏了优雅/ 2021年09月15日 11:20/ 0 赞/ 334 阅读