vue2中为什么需要使用代理服务器以及如何配置

vue2中需要使用代理服务器去解决跨域问题

1、什么是跨域问题？

浏览器从一个域名的网页去请求另一个域名的资源时，因为浏览器的同源策略影响 。 域名、端口、协议任一不同，都会导致跨域问题。即前端接口去调用不在同一个域内的后端服务器而产生的问题。

2、如何解决跨域问题？（什么是vue中代理服务器）

可以去了解一下代理服务器，代理服务器的主要思想是通过建立一个端口号和前端相同的代理服务器进行中转，从而解决跨域问题。因为代理服务器与前端处于同一个域中，不会产生跨域问题；而且代理服务器与服务器之间的通信是后端之间的通信，不会产生跨域问题。

 

3.代理服务器的使用及配置

在使用代理服务器时，需要在vue.config.js中配置，如果没有vue.config.js可以自己在根目录中进行创建，创建完毕之后，需要利用 devServer来进行实现代理服务器，在devSever之中利用proxy进行代理服务器的配置，配置一个匹配所有以你所写开头的请求路径，然后以targer来当作代理目标的基础路径，设置changeOrigin属性为true来允许跨域,配置ws为true用于支持websocket利用，进行配置。这样，一个基础的代理服务器就可以实现了。

代码：

/**vue。config.js**/


const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      "/api":{
        target:'url',   
        ws: true,
        changeOrigin: true,
      }
    }
  }
  
})