vue2处理跨域问题-编程知识

vue2处理跨域问题

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

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

1、创建项目

使用vue init webpack my_frontend 创建vue项目

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

HelloWorld.vue 文件内容：

<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.dataconsole.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,并添加内容

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：

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