vue2处理跨域问题

vue中访问springboot中的RestController中的服务

vue.config.js不生效-CSDN博客

1、创建项目

使用vue init webpack my_frontend 创建vue项目

在HelloWorld.vue文件中添加内容:

HelloWorld.vue 文件内容:

html 复制代码
<template>

  <div>
    <el-table :data="tableData"  border style="width: 100%">
      <el-table-column prop="id"  label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column  prop="pwd" label="密码"> </el-table-column>
    </el-table>
  </div>
</template>


<script>

// import testApi from '../api/test.js'
import axios from "axios";
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [],
    }
  },
  mounted() {
    this.fetch();
  },
  methods:{
     fetch() {
        const http = axios.create({
          // baseURL: BASEURL,
          timeout: 1000 * 30,
          withCredentials: true,
          headers: { 'Content-Type': 'application/json; charset=utf-8'  }
        })
        http.get('/api/datas/v1/users').then((res) =>{
          this.tableData = res.data
           console.log(res)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2、在项目根目录下创建vue.config.js,并添加内容

javascript 复制代码
module.exports = {

  devServer: {
    host: '127.0.0.1',
    port: 8080, //vue项目端口
    open: true,// vue项目启动时自动打开浏览器
    proxy: {
      '/api': { // '/api'是代理标识,用于告诉node,url前面是/api的就是使用代理的
        target: "http://127.0.0.1:8088", //目标地址,一般是指后台服务器地址
        changeOrigin: true, //是否跨域
        pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
          '^/api': ""
        }
      }
    }
  }
}

但是运行项目访问,还是显示跨域问题, 访问restfull接口: '/api/datas/v1/users

没有替换为:http://127.0.0.1:8088/datas/v1/users,而是使用vue项目的访问url:

h++ttp://127.0.0.1:8080/api/datas/v1/users++,可见vue.config.js没有作用。

3、查找原因

查看项目目录下package.json, package.json命令启动类的js

打开/build/webpack.dev.conf.js, 显示内容如下:

注意到这个代理的关键配置是在这个config目录下,所以把这个vue.config.js中的proxy部份内容放到config目录下的index.js中的dev.proxyTable中就行了,不是官网上的放到根目录

4、重启项目测试

npm run dev

可以正常访问restful服务。

相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫6 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel7 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼7 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手11 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode11 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu11 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu11 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript