什么是跨域
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,是由浏览器同源策略限制的一类请求场景。
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子:
#协议跨域
http://a.baidu.com访问https://a.baidu.com;
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80;
#域名跨域
http://a.baidu.com访问http://b.baidu.com;
比如请求简书的api
https://www.jianshu.com/
this.$ajax.get("https://www.jianshu.com/asimov/trending/now?count=15¬e_ids=")
.then(res => {
console.log(res)
})
就会报跨域问题 但如果就想请求他的接口呢
这个时候就可以使用vue脚手架提供的devServer.proxy配置反向代理
注意反向代理只适用与本地开发 生产环境不适用
比如需要访问的接口为简书的接口:
https://www.jianshu.com/asimov/trending/now?count=15¬e_ids=
-
找到项目根目录下的vue.config.js 如果没有则创建
-
单一反向代理
缺点是如果项目当中需要代理多个不同的域名的话就做不到
//vue.config.js 里面的内容 module.exports = { devServer: { // 通过webpack默认安装的webpack-dev-server开启本地服务器 proxy: "https://www.jianshu.com" // 你需要代理的地址 } }
- 在项目里面安装axios
cnpm install axios --save
- 愉快的开发
// 引入axios import axios from "axios" created () { axios.get("/asimov/trending/now?count=15¬e_ids=") // 当请求接口的时候就不需要加上服务器地址 // 实际访问的地址是https://www.jianshu.com/asimov/trending/now?count=15¬e_ids= .then(res => { console.log(res) }) }
-
多个反向代理
需要代理多个地址
需要把proxy改成key/value的方式
key为你定义的路径名称 value为你的配置
复制下面的代码到vue.config.js 里面
下面的代码你只需要修改一处地方 就是target 要访问的接口域名
module.exports = {
devServer: { // 通过webpack默认安装的webpack-dev-server开启本地服务器
proxy: { // 使用本地服务器的反向代理
'/api': { // 定义的路径名称 当代理遇到以/api的时候怎么处理
target: 'https://www.jianshu.com', // 要访问的接口域名 简书
ws: true, // 是否启用websockets
changeOrigin: true, // 开启代理:在本地会创建一个虚拟服务端,
// 然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
'^/api': '' //通过pathRewrite重写地址,将前缀/api转为/
}
},
'/beida': { // 定义的路径名称 当代理遇到以/api的时候怎么处理
target: 'https://www.pku.edu.cn', // 要访问的接口域名 北大的官网
ws: true, // 是否启用websockets
changeOrigin: true, // 开启代理:在本地会创建一个虚拟服务端,
// 然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
'^/beida': '' //通过pathRewrite重写地址,将前缀/api转为/
}
}
}
}
}
-
设置完成之后使用axios获取数据
// 引入axios import axios from "axios" created () { axios.get("/beida/dat/hotTopics.json")// 获取北大官网的数据 .then(res =>{ console.log(res) }) }