Vue跨域问题终解决「建议收藏」

Vue跨域问题终解决「建议收藏」config->index.js->dev->proxyTable{}修改proxyTable{}为:proxyTable:{‘/api’:{//虚拟目录target:’http://localhost:8081′,//后台NodeSpringboot项目的请求网址changeOrigin:true,…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

config->index.js->dev->proxyTable{}

修改proxyTable{}为:

proxyTable: {
      '/api': {//虚拟目录
        target: 'http://localhost:8081',//后台NodeSpringboot项目的请求网址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//由于上面的虚拟目录实际上是不存在的,不去掉的话访问的时候显示的url会变成'http://localhost:3000/api',所以得去掉
        }
      }
    }

发送ajax请求:

先安装axios命令:npm install axios

<template>
  <div class="hello">
    <div>
      {
  
  {title}}
    </div>
    <hr>
    <button @click="convert">点击获取数据</button>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        title: "静态数据"
      }
    },
    methods: {
      convert: function () {
        //这里需要注意一下:域名和端口换成api
        axios.get("api/sysUser/getSomething").then(res => {
          this.title = res.data;
        })
      }
    }
  }
</script>

SpringBoot后台:

  @GetMapping("/getSomething")
    public String getSomething() {
        return "后台数据";
    }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/192455.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Spring Cloud面试题(2020最新版)[通俗易懂]

    Spring Cloud面试题(2020最新版)[通俗易懂]文章目录为什么需要学习SpringCloud什么是SpringCloud设计目标与优缺点设计目标优缺点SpringCloud发展前景整体架构主要项目SpringCloudConfigSpringCloudNetflixSpringCloudBusSpringCloudConsulSpringCloudSecuritySpringCloudSleuthSpringCl…

  • java arraydeque poll,Java ArrayDeque「建议收藏」

    java arraydeque poll,Java ArrayDeque「建议收藏」Queue是什么Queue是具有队列特性的接口Queue具有先进先出的特点Queue所有新元素都插入队列的末尾,移除元素都移除队列的头部publicinterfaceQueueextendsCollection{//往队列插入元素,如果出现异常会抛出异常booleanadd(Ee);//往队列插入元素,如果出现异常则返回falsebooleanoffer(Ee);//移除队列元素…

  • 不止一个背包的背包问题_超级背包怎么使用方法

    不止一个背包的背包问题_超级背包怎么使用方法有 N 个物品和一个容量是 V 的背包。物品之间具有依赖关系,且依赖关系组成一棵树的形状。如果选择一个物品,则必须选择它的父节点。如下图所示:如果选择物品5,则必须选择物品1和2。这是因为2是5的父节点,1是2的父节点。每件物品的编号是 i,体积是 vi,价值是 wi,依赖的父节点编号是 pi。物品的下标范围是 1…N。求解将哪些物品装入背包,可使物品总体积不超过背包容量,且总价值最大。输出最大价值。输入格式第一行有两个整数 N,V,用空格隔开,分别表示物品个数和背包容量。接下来有 N

  • Python数据可视化教程:基于Plotly的动态可视化绘图

    Python数据可视化教程:基于Plotly的动态可视化绘图1.plotly介绍Plotly是一个非常著名且强大的开源数据可视化框架,它通过构建基于浏览器显示的web形式的可交互图表来展示信息,可创建多达数十种精美的图表和地图,下面我们以jupyternotebook为开发工具数据分析。Matplotlib存在不够美观、静态性、不易分享等缺点,限制了Python在数据可视化中的发展。为了解决这个问题,新型的动态可视化开源模块Plotly应运而生…

  • 进程间通讯的7种方式是_第一种形态有哪些方式

    进程间通讯的7种方式是_第一种形态有哪些方式**1、常见的通信方式**管道pipe:管道是一种半双工的通信方式,数据只能单向流动,而且只能在具有亲缘关系的进程间使用。进程的亲缘关系通常是指父子进程关系。命名管道FIFO:有名管道也是半双工的通信方式,但是它允许无亲缘关系进程间的通信。消息队列MessageQueue:消息队列是由消息的链表,存放在内核中并由消息队列标识符标识。消息队列克服了信号传递信息少、管道只能承载无格式字节流…

    2022年10月11日
  • c语言输入输出格式

    c语言输入输出格式//最近被某题的输入输出卡了。。。转一波随时看。。。菜哭&lt;spanstyle="font-family:KaiTi_GB2312;font-size:18px;"&gt;本小节介绍的是向标准输出设备显示器输出数据的语句。在C语言中,所有的数据输入/输出都是由库函数完成的。因此都是函数语句。本小节先介绍printf函数和putchar函数。printf函数printf函数称为格式输出函数,其…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号