【vue随手笔记】webpack解决跨域

前言：跨域问题一直是一个头疼的问题，这里需要详细做一篇文章来记录我解决方式。

webpack 跨域，在这里整理了一下逻辑首先不是为了axios库来进行跨域的，而是直接通过node的webpack设置代理来完成跨域的。

1、设置自定义域：

在config目录下，找到dev.env.js 文件：

文件目录.png

通过添加：

    API_HOST:"http://your.host:yourPort/"

例如：

如图所示.png

注意：这里一定要填写好全地址的域名或调试的ip地址，不要像很多博客中一样选择index中替代的地址，这里把步骤放到第一步，做完全强调！

2、设置index

在config目录下找到index.js文件：

文件目录.png

设置dev下的proxyTable

 proxyTable: {
      '/selfName': {
        target: 'http://your.host:yourPort/',
        changeOrigin: true,
        pathRewrite: {
          '^/selfName': '/'
        }
      }
    },

例如：

如图所示.png

3、设置baseUrl

点击这里查看如何设置BASE_URL
现在将baseurl 改为 ：

  const BASE_URL = /selfName/xxx/xxxx

例如：

如图所示.png

注意：此处/app 和target与上面配置的API_HOST 对应

4、设置axios的BASE_URL

在route 目录下的index.js中，这样使用：

import axios from "axios";
axios.defaults.baseURL = net.BASE_URL // 这里的net参考之前博客如何设置的静态全局常量

以上方法完全完成了dev 调试的跨域问题，如果是正式版打包的项目需要来进行跨域，那么得找到如图所示的文件：

prod文件.png

回到第一个步骤开始逐步往后重新配置即可实现。

5、cordova项目中，运行在模拟器上的跨域请求：

这里回到BASE_URL上，只需要在原来修改的BASE_URL还原为全域名或者全地址的URL即可，毋须额外操作。