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

相关推荐
XiaoMu_001几秒前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静5 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia19 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
ITKEY_21 分钟前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia22 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub25 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw28 分钟前
hippy的主要原理
前端
子兮曰30 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068830 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97634 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口