Vue-cli proxyTable 解决开发环境的跨域问题

什么是跨域

跨域问题来自于浏览器同源策略的限制，包括DOM同源限制和ajax同源限制，本文探讨的是ajax跨域。ajax跨域指的是一个页面的ajax只能请求和当前页面同源的数据，如果发现请求到的数据不符合要求，浏览器就会阻止返回的数据。所谓同源，指的是协议、域名、端口号都必须完全相同（同一ip的不同域名也是跨域）。同源策略的主要目的是防止csrf攻击，它可以有效地避免由于恶意攻击带来的危险，浏览器器同源策略使得网络访问更加安全。

URL 说明是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js 同一域名下允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹允许
http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js

http://www.a.com/b.js 不同域名不允许

使用Vue-cli 创建的项目，开发地址是localhost:8080，需要访问非本机上的接口http://40.00.100.100:3002/deviceGroup/listDeviceGroup。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置，不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，通过修改vue proxyTable接口实现跨域请求

利用Axios解决跨域问题：

1：打开config/index.js

module.exports{
    dev: {
    }
}

在这里面找到proxyTable{}，改为这样：

proxyTable: {
      '/scp-accesscontrolapp': {
        target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/scp-accesscontrolapp': ''//这里理解成用‘/scp-accesscontrolapp’代替target里面的地址，后面组件中我们调接口时直接用scp-accesscontrolapp代替 比如我要调用'http://40.00.100.100:3002/deviceGroup/listDeviceGroup'，直接写‘/scp-accesscontrolapp/deviceGroup/listDeviceGroup’即可
        }
      }
    }

那么又是如何解决跨域问题的呢？其实在上面的'/scp-accesscontrolapp'的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。

2：在需要调接口的组件中这样使用：

import Axios from '@/assets/js/AxiosPlugin'

// 获取所有的设备组
export const listDeviceGroup = () => {
  return Axios.get('/scp-accesscontrolapp/deviceGroup/listDeviceGroup')
  .then(res => res.data)
}

Vue-cli proxyTable 解决开发环境的跨域问题

猜你喜欢