跨域是前端开发绕不开的一个话题,尤其在前后端分离的大趋势下,更加变得家常便饭,比如vue本地开发,调用接口,就要跨域.

    前面几篇文章,也有所设计跨域相关指示,这里总结一下,前端使用vue开发解决跨域的问题.

    1.因为跨域是浏览器的安全策略,在chorme浏览器中,可以在快捷图标中设置 –disable-web-security,非常方便.但是在最新chorme中还要稍加复杂的设置.
    2.使用chorme插件Allow-Control-Allow-Origin,需要翻墙,实际用起来,效果还不错.偶尔失效.
    3.使用jsonp ,前面有文章jsonp使用及promise封装.
    4.使用node代理,如使用代理解决跨域限制
    5.使用vue-cli中配置的插件webpack-dev-middleware,实现代理.这要是本文要写的.原理同4,都是使用nodejs做个代理,只是过程不同.

    dev.server.js

    1. var devMiddleware = require('webpack-dev-middleware')(compiler, {
    2. publicPath: webpackConfig.output.publicPath,
    3.     stats: {
    4.         colors: true,
    5.         chunks: false
    6.     }
    7. })
    8. // proxy api requests
    9. Object.keys(proxyTable).forEach(function (context) {
    10.     var options = proxyTable[context]
    11.     if (typeof options === 'string') {
    12.         options = { target: options }
    13.     }
    14.     app.use(proxyMiddleware(context, options))
    15. })

    config/index.js

    1. dev: {
    2.     env: require('./dev.env'),
    3.     port: 8081,
    4.     assetsSubDirectory: 'static',
    5.     assetsPublicPath: '/',
    6.     /*assetsSubDirectory: '/xxxxx',
    7.     assetsPublicPath: '',*/
    8.     proxyTable: proxyConfig.proxyList,
    9.     cssSourceMap: false
    10.  }

    config/proxyConfig.js

    1. module.exports = {
    2.                     proxyList: {
    3.                             '/apiDev': {
    4.                                 //真实跨域接口
    5.                                 target: 'http://xxxxx.com',
    6.                                 changeOrigin: true,
    7.                                 pathRewrite: {
    8.                                     '^/apiDev': ''
    9.                                 }
    10.                             }
    11.                     }
    12. }

    在开发中使用接口如 /apiDev/getAll,会被代理到http://xxxxx.com/getAll.
    开发完成后,要上测试或者生产,在换成http://xxxxx.com/getAll. 这部分也可以通过配置实现自动切换,以后会写到.