vue中跨域处理

今天一个vue的项目开发环境localhost调用后端接口，提示跨域了，我按照以往的处理方式希望后端加一个Access-Control-Allow-Origin,但是这后端的哥们始终没有加成功，后面旁边一个常弄vue项目的同事说可以在vue的webpack文件中配置跨域，这可刷新了我的想法，这个我以前是不知道的，或者有看视频听别人说过，但是自己并没有注意，这下算是遇到了。网上搜索了一下别人的问题和答案，经过使用是正解。另外改完配置文件一定要重启项目才会生效。

在根目录下config的index.js文件中配置

开发环境配置在dev中

changeOrigin:true    //是否跨域

target：目标接口域名

/iclient': {}, 就是告诉node, 我接口只要是'/iclient'开头的才用代理.所以你的接口就要这么写 /iclient/xx/xx. 最后代理的路径就是 http://xxx.xx.com/iclient/xx/xx.

可是不对啊, 我正确的接口路径里面没有/iclient啊. 所以就需要 pathRewrite,用''^/iclient'':'', 把'/iclient'去掉, 这样既能有正确标识, 又能在请求接口的时候去掉iclient.

再摘抄一例子：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {  //接口只要是这个开头的才用代理
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/api'   //重写接口
      }
    },
  cssSourceMap: false
}

上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.abc.com这一域名下：

'http://localhost:8080/api' ===> 'http://www.abc.com/api'

我这边的使用实践，是没有问题的。

配置了pathRewrite这种，在实际调用时是加了/code的，但是这个会被替换为/。

 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/oum/',
    proxyTable: {
      '/oum_api':{
        target:'http://30.18.22.75',
        changeOrigin: true
      },
      '/code':{
        target:'http://30.16.11.112',
        changeOrigin: true,
        pathRewrite:{//这种在实际调用时是加了/code的，但是这个会被替换为/
          '^/code':'/'
        }
      }
    },