跨域---代理转发 (proxy)

• 跨域：是浏览器产生的同源策略产生的跨域，服务器之间不存在跨域问题

• 代理服务器 向 数据服务器(目标服务器) 发起请求

• 代理服务器 和 前端项目同源，也没有跨域问题

 

vue-cli 中集成的跨域解决方案

思路：

在前端项目和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：

1. 中间服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求

2. 中间服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

在vue.config.js配置文件中，有一项是devServer

module.exports = {
  devServer: {
    // 代理配置
    proxy: {
      // 这里的 api 表示如果我们的请求地址以 /dev_api 开头的时候，就出触发代理机制
      '/dev_api': {
        target: 'www.xxxxxxx.com', // 需要代理的地址，就是后端服务器地址
        changeOrigin: true, // 是否跨域，需要设置此值为 true 才可以让本地服务代理我们发出请求
        // 路径重写
        pathRewrite: {
          // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
          '^/dev_api': '/api' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
        }
      }
    }
  }
}

代理转发的原理

• 服务器与服务器之间没有跨域问题

• 在前端项目和目标服务器之间架设一个代理服务器

• 代理服务器向目标服务器发请求

• 代理服务器和前端项目同源