zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

Vue跨域 问题 解决 建议 收藏
2023-06-13 09:13:38 时间

大家好,又见面了,我是你们的朋友全栈君。

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 "后台数据";
    }

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

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