Web前端最全【vue】 配置代理、解决跨域问题_vue 代理(1)，附学习笔记+面试整理+进阶书籍

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

• 如图，通过axios请求服务器上的资源：
  

• 简单写了一个spring boot项目用于处理该请求：（你只需知道这个请求会被服务器处理）
  

• 出现跨域问题：（从8080端口请求5000端口，端口不一致）
  

也就是：

配置代理解决跨域问题：

官网：https://cli.vuejs.org/zh/config/#devserver-proxy

方法一：

新建vue.config.js配置文件（和 package.json放在同级目录下），配置如下内容：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: 'http://localhost:5000'
  }
})

表示访问代理服务器，代理服务器就会帮你访问：http://localhost:5000

这样，就相当于配置了一个代理服务器，它和我们的项目具有相同的端口，我们访问它，就不存在跨域问题！

现在，我们访问代理服务器（端口为8080），而不是直接访问5000端口的服务器

---

总结一下，就是：

方法二：

方式二的扩展性更好，原理和方法一是一样的！

新建vue.config.js配置文件（和 package.json放在同级目录下），配置如下内容：(含义在本文后面的总结里面有)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        pathRewrite:{'^/api':''},//路径改写
      },
    }
  }
})

再修改一下路径：

使用方法二最终的文件：

• vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        pathRewrite:{'^/api':''},//路径改写
      },
    }
  }
})

• main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render: (h) => h(App),
});

• App.vue

<template>
    <button @click="getStudentInfo">获取学生信息</button>
</template>

<script>
import axios from "axios"
export default {
 methods: {
#### 最后

-------------------------------------------------------------

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。



![](https://img-blog.csdnimg.cn/img_convert/718310d106ab948d6f467d78e08b1aed.png)