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

相关推荐
酷酷的阿云3 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205875 分钟前
web端手机录音
前端
齐 飞11 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹28 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10092 小时前
ffmpeg重复回听音频流,时长叠加问题
前端