Vue跨域问题终解决

我会带着你远行 2022-03-21 04:28 226阅读 0赞

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

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue.js —— 解决跨域问题

发环境一般要跨域，解决跨域问题，要设置代理，在vue-cli 3下 `package.json` 同级目录新建一个 vue.config.js 文件，加入下面代码，其他版...

缺乏、安全感/ 2024年04月19日 15:16/ 0 赞/ 13 阅读

相关 vue解决跨域问题

两天有朋友用vue写页面遇到了跨域问题（其实是后台的问题），但是在局域网下也得把数据调过来，我在这里简单总结两种方法吧，希望对大家有帮助。跨域问题的报错是下面这样的...

╰半夏微凉°/ 2024年04月18日 08:51/ 0 赞/ 12 阅读

相关 vue解决跨域问题（下）

目录 1. 前言 2. 问题引入 2.1 整合后端问题 2.2 整合前端问题 3. 解决方案 3.1 方案1（无效

男娘i/ 2022年10月13日 05:13/ 0 赞/ 127 阅读

相关 vue跨域问题

开发环境解决跨域问题简单粗暴 ![70][] 文件在这里 config文件夹下index.js，记得改完之后重新run一下 (npm run dev) ![7

谁借莪１个温暖的怀抱￠/ 2022年05月31日 07:29/ 0 赞/ 198 阅读

相关 springboot+vue解决跨域问题

后台添加过滤器，允许跨域 @Configuration public class GlobalCorsConfig { @Bean

向右看齐/ 2022年05月07日 16:58/ 0 赞/ 198 阅读

相关 springboot+vue解决跨域问题

后台添加过滤器，允许跨域 @Configuration public class GlobalCorsConfig { @Bean

Dear 丶/ 2022年05月07日 03:48/ 0 赞/ 238 阅读

相关 Vue跨域问题终解决

config->index.js->dev->proxyTable\{\} 修改proxyTable\{\}为: proxyTable: { '

我会带着你远行/ 2022年03月21日 04:28/ 0 赞/ 227 阅读

相关 Vue解决跨域问题

在config文件夹下面的index.js里面进行修改这个是3\版本其他版本不一定是这个文件夹 module.exports = { dev:

àì夳堔傛蜴生んèń/ 2022年01月21日 06:11/ 0 赞/ 308 阅读

相关解决vue的跨域问题

> 使用官方推荐方法进行跨域问题解决 ![71fbc7ebfd09435866efe8801ea111dd.png][] 之前使用vue-jsonp 来解决跨域问题，这次使

你的名字/ 2021年09月04日 05:28/ 0 赞/ 474 阅读

相关 vue解决跨域问题汇总

方法1：后台更改header `header('Access-Control-Allow-Origin:')；`//允许所有来源访问 `header('Access-

男娘i/ 2021年07月25日 19:52/ 0 赞/ 346 阅读