专栏首页前端进阶vue开发微信商城项目总结之四--本地代理处理跨域问题

vue开发微信商城项目总结之四--本地代理处理跨域问题

之前处理跨域问题是通过jsonp,但是只有开发环境是跨域的,代码打包后上传到服务器便不再跨域,所以ajax在本地做了判断,判断是否是跨域,跨域则走jsonp否则其他正常调用

可以通过本地配置nginx做代理来处理跨域,但是作为一个前端来说,学习成本略高,

后来发现vue-cli中也有代理,解决开发环境跨域的问题,

config>index.js 在dev中找到中找到proxyTable,并对其进行配置,我的index.js如下

var path = require('path')
var new_date = new Date();

/**日期时间格式化 20170413170432**/
var date_month = new_date.getMonth() <= 8 ? '0' + (new_date.getMonth() + 1) : (new_date.getMonth() + 1);
var date_day = new_date.getDate() <= 9 ? '0' + new_date.getDate() : new_date.getDate();
var date_hour = new_date.getHours() <= 9 ? '0' + new_date.getHours() : new_date.getHours();
var date_min = new_date.getMinutes() <= 9 ? '0' + new_date.getMinutes() : new_date.getMinutes();
var date_sec = new_date.getSeconds() <= 9 ? '0' + new_date.getSeconds() : new_date.getSeconds();
var new_dateTime = new_date.getFullYear() + "年" + date_month + "月" + date_day + "日" + date_hour + "时" + date_min + "分" + date_sec + '秒';

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/' + new_dateTime + 'app' + '/index.html'), // 编译输入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'app'), // 编译输出的静态资源路径
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: './', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
    productionSourceMap: false, // 是否开启 cssSourceMap
    productionGzip: false, // 是否开启 gzip
    productionGzipExtensions: ['js', 'css'], // 需要使用 gzip 压缩的文件扩展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  buildppe: {
    env: require('./ppe.env'),
    index: path.resolve(__dirname, '../dist/' + new_dateTime + 'ppe' + '/index.html'), // 编译输入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'ppe'), // 编译输出的静态资源路径
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: './',// 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
    productionSourceMap: false, // 是否开启 cssSourceMap
    productionGzip: false, // 是否开启 gzip
    productionGzipExtensions: ['js', 'css'], // 需要使用 gzip 压缩的文件扩展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  buildddd: {
    env: require('./ddd.env'),
    index: path.resolve(__dirname, '../dist/' + new_dateTime + 'dev' + '/index.html'), // 编译输入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'dev'), // 编译输出的静态资源路径
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: './',// 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
    productionSourceMap: false, // 是否开启 cssSourceMap
    productionGzip: false, // 是否开启 gzip
    productionGzipExtensions: ['js', 'css'], // 需要使用 gzip 压缩的文件扩展名
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 1111,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/baseUrl': { /* 当发生跨域请求是调用此接口 本地代理*/
        target: 'https://api.douban.com/v2/event/list?loc=108288&start=1&count=3',
        changeOrigin: true,
        pathRewrite: {
          '^/baseUrl': ''
        }
      },
    },
    cssSourceMap: false
  }
}

在使用的时候

get () { // 开发环境跨域时调用本地代理 具体查看 config-->index.js
      this.$http.post(process.env.baseUrl)
        .then(res => {
          console.log(res)
          this.data = res
        })
    }

config>config>dev.env.js

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  baseUrl: '"/baseUrl"',//处理跨域
  /* 福币商品skuID */
  rechargeList: `[{
    skuid: "020d73154fea407aba111e8a0b010cb1",
    name: "开发",
    thumbPath: ''
  }, {
    skuid: "b7ef02ebab9f4edf9cb44cb184f7dec3",
    name: "开发",
    thumbPath: ''
  }, {
    skuid: "52856479a6e74c4e9ea943ce6b4d4827",
    name: "开发",
    thumbPath: ''
  }, {
    skuid: "a4b821d1bcf34d4b9af286c1a9cedc92",
    name: "开发",
    thumbPath: ''
  }]`,
 
})

process.env 是根据不同的环境调用不同的接口,具体看这里我的项目中一共四个环境

开发环境 dev 测试环境 ddd 预生产环境 ppe 生产环境(正式环境) production

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于javascript的原型和原型链,看我就够了(一)

    关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看 要了解原型和原型链,我们得先从对象说起

    陌上寒
  • javascript正则表达式RegExp再次研究-replace

    虽然有那么多属性,但是基本用不到,为什么呢?因为这些信息都包含在模式声明中了: 字面量创建的正则

    陌上寒
  • 关于javascript的原型和原型链,看我就够了(三)

    原型对象有一个constructor属性,指向该原型对象对应的构造函数 foo 为什么有 constructor 属性?那是因为 foo 是 Foo 的实例。 ...

    陌上寒
  • win10 uwp 获得缩略图 文件缩略图视频小图

    有时候需要获得文件或视频的缩略图。 本文提供两个方法,用于获得文件的缩略图和截取视频指定时间的显示图片。

    林德熙
  • ASP.NET Core 给上传的图片加水印

    图片加水印是网站中使用非常广泛的技术,可以保护网站内容的版权,例如我博客这样的网站。在传统ASP.NET(.NET Framework)中,我们可以使用Syst...

    Edi Wang
  • iOS 静态代码扫描之工具调研

    为了进一步加强测试质量,同时探索测试左移在同步中的实践,iOS同步助手尝试接入静态代码扫描工具。希望通过不同的途径提前发现日常测试中难发现的问题。

    腾讯移动品质中心TMQ
  • Confluence 6 管理协同编辑 原

    协同编辑能够让项目小组中的协同合作达到下一个高度。这个页面对相关协同编辑中的问题进行了讨论,能够提供给你所有希望了解的内容。

    HoneyMoose
  • python3操作串口

    用户2398817
  • 在.NET Core 里使用 BouncyCastle 的DES加密算法

    .NET Core上面的DES等加密算法要等到1.2 才支持,我们可是急需这个算法的支持,文章《使用 JavaScriptService 在.NET Core ...

    张善友
  • 一个进程有3个线程,如果一个线程抛出oom,其他两个线程还能运行么?

    jmap -dump:live,format=b,file=m.hprof <PID>

    王小明_HIT

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动