vue配置服务器代理

一、配置代理相关

1.为什么会产生跨域

跨域：违背了同源策略(协议名、主机名、端口号三者一致) 过程：localhost:8080 向 localhost:5000 请求数据，localhost:5000也及时响应给8080了，localhost:8080拿到数据了，但是发现跨域了，并没有再请求localhost:5000了

2.解决跨域的三种方式

（1）cors: 通过响应时候加上一些特殊的响应头让浏览器识别（后端操作）

（2）jsonp：通过script的src属性在引入外部资源时候不受同源策略限制特点实现，但是只能解决get请求（不常用）

（3）服务器代理（只适用于开发环境）

二、废话不多说上代码

在vue.config.js文件中添加以下代码：

  devServer: { //配置项来配置代理服务器
    proxy: { //用于配置代理规则
      '/api': { //匹配所有/api开头的请求进行代理
        target: 'http://api.example.com', //将请求代理到目标服务器
        changeOrigin: true, //是否改变请求源
        pathRewrite: {
          '^/api': '' //重写请求路径，（这里正则去掉/api前缀）
        }
      }
    }
  }
}

总结一下，Vue代理服务器（Proxy）配置是解决跨域请求问题的一种方法，通过配置vue.config.js文件中的devServer选项，可以实现将请求代理到目标服务器的功能。配置代理服务器可以让我们在开发Vue应用时更方便地进行跨域请求。