vuecli开发环境-做代理服务器

vuecli开发环境-做代理服务器

目标

• 回顾什么是跨域

• 跨域的几种解决方案是什么

回顾

什么是跨域:
网页所在url的 协议, 域名, 端口号, 和Ajax请求url的 协议, 域名, 端口号有一个对应不上, 就发生跨域
跨域是浏览器对ajax做出的限制
演示用axios请求网易新闻地址, 发现跨域报错
http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html

jsonp方式

• 需要前端和后端同时支持

前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据
后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行
调用函数名, 并传递数据

• 例子代码(看看就行, 不用尝试)

<script>
  functioncallBackFn(data){
    // data就是'{"a": 10, "b": 20}'
  }
</script>
<scriptsrc="http://后台接口地址?callback=callBackFn"></script>
<!-- 后台接口返回 'callBackFn({"a": 10, "b": 20})' -->

cors方式

• 前端什么也不用做

• 后端需要开启cors

实际上就是在响应头添加允许跨域的源
Access-Control-Allow-Origin: 字段和值(意思就是允许去哪些源地址去请求这个服务器)

代理转发

• 如果后端jsonp也不弄, cors也不弄, 就给你个接口地址

我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址

• 但是vuecli脚手架, 启动了一个webpack开发服务器, 它就能做代理转发

• 而且前端和这个服务器是同源的都是8080端口

• 需要修改webpack开发服务器的配置即可

更多配置项参考这里: https://webpack.docschina.org/configuration/dev-server/#devserverproxy

devServer: {
    proxy: {
      // http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
      '/api': { // 请求相对路径以/api开头的, 才会走这里的配置
        target: 'http://c.m.163.com', // 后台接口域名
        changeOrigin: true, // 改变请求来源(欺骗后台你的请求是从http://c.m.163.com)
        pathRewrite: {
          '^/api': ''// 因为真实路径中并没有/api这段, 所以要去掉这段才能拼接正确地址转发请求
        }
      }
    }
  }

• axios请求的代码

axios({
    url: '/api/nc/article/headline/T1348647853363/0-40.html'
})

小结

1. 跨域几种解决方案?

• jsonp / cors / 代理转发

2. vuecli环境如何设置代理转发?

• 在vue.config.js - 添加规则和配置