跨域问题及代理转发

1、数据mock

• 数据mock我们使用yapi这个接口平台来管理，这样的话既可以很好的维护一封api文档，又可以进行数据的mock，这是我们这个项目的的接口文档：vue-mall

• 你也可以使用mockjs、esaymock之类的，其实都差不多，yapi还是很好用的，一些基础的用法文档都有讲，在项目中我用高级mock的比较多，反正都是写js也可以用mockjs的语法，还是挺方便的。

2、代理转发

• 其实代理转发就是配置下webpack的devServer，详见webpack从0到1-devServer初探。
• 而在vue-cli3.x的脚手架生成了项目中，因为隐藏了webpack的配置文件，所以新建一个vue.config.js，然后在所提供的config配置文件修改下就行，原理还是一样的。

const mockUrl = 'http://yapi.demo.qunar.com/mock/17982'

module.exports = {
  // ...
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/dev-api': {
        target: mockUrl,
        pathRewrite: { '^/dev-api': '' },
        secure: false,
        changeOrigin: true
      }
    }
  },
  // ...
}

3、关于跨域

• 很多同学本地mock、跟后端同学联调啊什么的不成功，很多情况都是因为跨域问题报错，其实处理跨域问题一般就是两种方案。
  • 一种就是上文中的使用webpack的devServer，配置一下实现代理转发，这个其实就是一点webpack的基础知识，推荐大家可以去看看webpack从0到1-devServer初探。
  • 一种就是CORS，就是让服务端去设置一些http中的Access-Control-Allow-Methods、Access-Control-Allow-Origin、allow-***这么一些东西，跟预请求有关，你感兴趣可以去搜下，这里不多说。
  • 两者原理都是一样，都是起个中转服务器来规避同源协议的问题。

4、小结

• 总而言之，vue的脚手架升级了以后，开发配置一个项目还是变得更简单了。
• 对于老版本的脚手架配置方式：https://www.jianshu.com/p/896f8127fe60
• 欢迎大家围观项目中的一些实际的用法。