Vue开发环境代理设置

如何解决跨域问题?
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

JSONP跨域原理分析： https://blog.csdn.net/hansexploration/article/details/80314948

jsonp跨域原理
jsonp是用来解决跨域获取数据的一种解决方案，具体是*通过动态创建script标签 ，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术。

Vue开发环境代理设置

1. 代理跨域设置：

 // config->index.js中设置  
 proxyTable:{
    '/apis': {
      target: 'http://study.my',     //设置你调用的接口域名和端口号 别忘了加http
      changeOrigin: true,           //开启跨域
      secure: false,                // 如果是https接口，需要配置这个参数
      pathRewrite: {
         '^/apis': '/zhengpin_backend/backend_laravel/public'

        //路径重写: 如果请求的路径中包含apis,则自动触发路径重写。
        //比如说,请求路径-》/apis/login     系统自动重写为htpp://study.my/zhengpin_backend/backend_laravel/public/login.
        //在代理服务器上，请求重写后的地址数据，之后再返回给/apis/login，作为/apis/login的请求返回。
      
      }
    }
  },

注意事项： 跨域时，默认访问不能是localhost, 得修改为任意一个域名。 （localhost 谷歌禁止跨域）

2. 开发环境（development）和 生产环境（product）自动调用接口：

     config->dev.js中设置：      API_ROOT: '"http://vue.my:8080/apis"'

     config->prod.js中设置：     API_ROOT:'".."'

通过process.env.API_ROOT 即可访问到相应的数据。
注意，vue项目如果你是通过npm run dev，则调用的是开发环境的API.ROOT.
如果你打包npm run build,则调用的是生产环境的API.ROOT.

3. axios的引用，以及重写baseURL.

• npm安装axios 在vue项目目录下，运行npm install axios --save

• 在main.js中引入：

      // axios引入
     import axios from 'axios';
  
     Vue.prototype.axios = axios;
     
     //下面两个是特殊设置
  
      //允许跨域带cookie
     axios.defaults.withCredentials = true;       
  
     //全局axios的baseUrl 。这里的baseURL引入的是开发/生产环境中的接口头部。注意=》baseURL必须是绝对路径（以http/https开头）
     axios.defaults.baseURL = process.env.API_ROOT;   
  

4. 谷歌，ie浏览器请求时无法携带cookie，而在火狐中却可以携带cookie的bug:

vue默认的启动域名是localhost:8080

原因：谷歌，ie浏览器不予许本地localhost域名请求数据时，携带浏览器的cookie信息。

解决办法：将本地ip重新指向一个你自定义的域名。操作如下：

• 在C:\Windows\System32\drivers\etc\hosts 文件中，写入如下：

• 127.0.0.1 vue.my （ 自定义域名即可，这里我自定义的时vue.my ）

• 随后再把vue中，config->index.js中host改为自定义的域名（eg: vue.my）重新启动即可。