Vue解决跨域问题

　　原理：因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，它们之间没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，可以配置一个代理服务器来请求另一个服务器中的数据，然后把请求出来的数据返回到代理服务器中，代理服务器再把数据返回客户端，即可实现跨域数据访问

在Vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务：localhost:8080），再由本地的服务器去请求真正的服务器

1.一般使用vuecli生成的项目下的config文件夹里有一个index.js文件，进行跨域设置就是设置其中的proxyTable（或者proxy）

// 配置跨域，这里的/api中,^/api,下面baseURL的/api的中api，可以随便改，但是必须保证三者一致
    proxyTable: {
      // 1.在proxy中设置要访问的接口
      '/api': {
        // 接口地址
        target: 'http:',
        // 是否允许跨越
        changeOrigin: true,
        // 重写，这里应该是匹配所有以/api开头的链接,匹配的时候会将/api替换成target的接口地址
　　　　　// 如果接口地址中就有/api，则不需要重写，如接口地址是/api/a/login，则直接套用上面模板，并在axios的url中写/api/a/login

        pathRewrite: {
          '^/api': ''
        }
      }
    }

2.重启服务，即可实现跨域

 

 

对于vuecli3创建的项目，需要在src目录下，即和package.json同一级，创建vue.config.js，这个文件会自动被加载

在vue.config.js文件中如下配置：

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
module.exports = {
      // 服务项配置    
      devServer: {
            host: 'localhost',
            port: 8080,
            https: false,
            // 自动启动浏览器
            open: true,
            // 设置代理proxy
            proxy: {
                  '/api': {
                        target: 'http://50.0.3.1:8080',
                        changeOrigin: true,    //表示是否跨域，
                        // pathRewrite: {           //表示需要rewrite重写的，如果接口地址中就有/api，则不需要重写
                        //       '^/api': '/api',
                        // }
                  }
            }
      }
}

重启服务，即可实现跨域