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