vue跨域请求代理服务器的配置处理

为什么会出现跨域问题？

因为在我们前端进行后端请求的时候，违背了浏览器的同源策略
同源策略：协议、域名(IP)、端口相同即为同源。浏览器的同源策略就是一种约定。如果你违反了这个策略就会出现跨域问题。

vue出现跨域问题如何解决？

在vue.config.js中进行如下配置，开启我们的vue中的代理服务器，让代理服务器帮我我们进行对后台的访问

module.exports={
  // 开启代理服务器
  devServer:{
    proxy:{
      '/api':{
        target:'http://localhost:5001', // 这里就是写我们进行访问的后台api
        pathRewrite:{'^api':''}, // 这里就是将我们的请求url进行重写，让后台接收到我们的请求地址中没有我们前端进行配置的这个头api
        // ws:true  支持websocked
        // changeOrigin:true  用于控制请求头中的host值
      },
      // 如果还需要访问其他的api，可以在这里继续进行配置
    }
  }
}

这样就开启了我们的代理服务器，然后我们使用axios就可以进行访问：

// 这里我们的端口号还是8080，因为代理服务器会帮助我们进行对后台的访问
      axios.get("http://localhost:8080/api/user").then(response => {
        console.log(response.data);
      })

这样就通过了我们前端进行配置，就解决了跨域的问题