Web前端最全【vue】 配置代理、解决跨域问题_vue 代理(2)，大厂产品经理面试题

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

vue配置代理：https://cli.vuejs.org/zh/config/#devserver-proxy

跨域问题引入

安装axios发送ajax请求：

npm install axios

使用：(官网：https://axios-http.com/docs/example)

• 如图，通过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',


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/5133375f6415cb6259bc62f71b1a128c.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/4780134ad8e26c42ccc5307aea74a008.webp?x-oss-process=image/format,png)


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

677)]

[外链图片转存中...(img-uZiEVU95-1715876117678)]


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