基于express、mongodb和vue的电影类全栈项目实践遇坑汇总

遇到的一些坑?

老生常谈的跨域问题！

前端需要在config目录下的index.js中进行配置proxyTable，changeOrigin: true这句很重要……之前忘了写这句，导致跨域问题根本没解决……

'/news': { // 时光网咨资讯的接口
            target: 'http://m.mtime.cn/Service/callback.mi/News/',
            changeOrigin: true,
            pathRewrite: {
                '^/news': '/'
            }
        }

后端需要用到http-proxy-middleware，进行代理转发

var proxy = require('http-proxy-middleware');
var timesOptions = {
    target: 'http://m.mtime.cn/Service/callback.mi/News/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
        '^/news': '/'
    }
};

var timesProxy = proxy(timesOptions);

跨域了咋还图片403？！

豆瓣有对一些图片进行防盗链处理，所以我们对图片的请求都被禁止访问了。
一般防盗链是根据HTTP请求Header中的Referrer字段的值来判断是否正常应答。而我采取的解决办法是通过第三方网站来处理图片地址.

https://images.weserv.nl/?url=imgurl

时光网是在视频上做了防盗链……目前还没有解决。

关于时间过滤

moment在vue入口文件进行配置的时候locale(‘zh-cn’)并没有起作用…但vue-moment配置全局的时候就可以……所有两者本来就是差不多的东西，选一个就好了。（moment我是为了数据存入库的时候时间方便查看，所以用它来过滤了一下）

build

每次修改完前端部分都要重新build一下，这样整个项目运行的时候才是修改过代码

接口

写完后端的接口一定要在postman是测试一下，确保接口无误之后，前端再接接口处理数据，进行联调。

返回的json里有标签怎么办

在vue里直接用v-html就好了