跨域问题及代理转发

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

欢迎大家围观项目中的一些实际的用法。

本文章由javascript技术分享原创和收集