解决前端开发环境的跨域问题

在我们进行项目开发时，想要和别的服务器进行通信，那肯定会遇到跨域问题，所谓跨域 就是因为同源策略的限制，导致不同源之间不能通信。所谓同源是指，域名，协议，端口相同。同源策略(Same origin policy)是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

解决跨域问题，通常有两种方式：第一：后台配置允许所有域访问或者允许指定域访问。第二：前端proxyTable配置代理。下面 我们来讲讲如何前端配置跨域，而且这只是在开发环境下的配置跨域，生产环境下还要配置Nginx代理服务。在vue项目的config文件下的index.js下中的proxyTable做如下配置（若我们调用的完整接口是：http://192.168.0.22:8080/Zloud/Controls/queryAllControls）

proxyTable: {
      '/api': {
        target: 'http://192.168.0.22:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }    
      },
  // 倘若我们需要访问不同的服务器可像如下添加配置
      '/card': {
        target: 'http://api.pyun.com',
        changeOrigin: true,
        pathRewrite: {
          '^/card': ''
        }    
      }
    },

那我们调用接口就可以这样调用：

export const getLampMgmtInfoList = (params) => {
  return Axios.post('/api/ZCloud/Controls/queryAllControls', params).then(res => res.data)
}

 这样配置好后，就不会再出现关于禁止访问的跨域报错了。

代理成功之后你查看自己网络请求中的url：http://localhost:8010/api/Zloud/Controls/queryAllControls，说明你已经把请求代理到自己的代理服务器上了，说明配置成功了。