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服务。

相关推荐
天生我材必有用_吴用6 分钟前
vue3实战九、vue3+vue-cropper实现头像修改
前端
拳打南山敬老院14 分钟前
从零构建一个插件系统(四)插件的缓存
javascript·架构
Sobeit15 分钟前
ES2025 颠覆性 JS 黑科技新特性详解
前端
new_abc21 分钟前
net-snmp添加自定义mib树
服务器·前端·javascript
前端梭哈攻城狮28 分钟前
dify二开示例
前端·后端·python
该用户已不存在30 分钟前
Node.js 真的取代了PHP吗?
前端·后端·node.js
ze_juejin40 分钟前
JavaScript 的事件循环(Event Loop)机制
前端
前端缘梦43 分钟前
从源码到dist:拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
热爱运维的小七1 小时前
中型企业如何用 RUM 技术破解地理分布式用户体验难题?从指标监测到优化实操
前端·网站响应速度·地域访问
程序猿阿伟1 小时前
《从点击到共鸣:论坛前端如何用交互细节编织用户体验》
前端·ux