前端跨域代理服务器

1.代理服务器

因为我们的项目是启动在8080服务器端口

 

它要直接调用我们自建的3000服务器端口的数据就会产生跨域，

那么我们可以让8080服务器去请求3000服务器数据，而不是之间调用，

然后8080返回请求的数据转发给浏览器，便不会跨域

此时8080服务器便是代理服务器了，

2.开发模式跨域

1.在项目中创建一个vue.config.js文件

vue.config.js

module.exports = {
  // devServer 开发服务器
  devServer:{
    proxy:{
      // 专门访问/api 地址的都用代理进行操作
      '/api':{
        // 代理的真正服务器
        target:'http://localhost:3000',
        // 因为我们真正的axios请求没有api这个地址，所以要对我们自己axios请求地址进行重写
        // 匹配到/api字符串然后把它替换成 :
        pathRewrite:{
          '^/api':""
        }
      }
    }
  }
}

devServer 为vue Cli 里面的配置属性 ，用来开发服务器 配置参考 | Vue CLI

2. 改变我们的全局配置的js文件

 

3. 总结：什么是服务器代理

 

我们发现最后banner发起的请求是http://localhost:8080/api/banner,最终访问的是8080服务器端口

因为我们在全局配置的js文件里面将我们的开发环境后台地址改成了/api/,于是我们的每一次请求都会是http://localhost:8080/api/,

此时我们的每一次请求都会把请求地址追加到http://localhost:8080/api/后面，变成了http://localhost:8080/api/banner

但是我们在步骤1的vue.config.js里面规定了只要是带有/api 的请求地址，全部都进行服务器代理，把真实请求的服务器指向 http://localhost:3000/api/

然后有对/api进行了重写，让/api字符串为空，最后的真实请求地址变为http://localhost:3000

此时我们的banner请求便为http://localhost:3000/banner 此时便可以请求到3000服务器端口的数据了，

然后我们的8080服务器转发这些数据到浏览器

相当于8080服务器是一个中间人，浏览器问它要数据，它说我没有，但是它可以去向3000服务器借，借到的数据再给浏览器，

这就是服务器代理