同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。
三种跨域方法
第一个CORS跨域
第二个JSONP 跨域
第三个代理跨域
CORS跨域
前端直接调用就可以了
在vue中安装axios
import axios from ‘axios’
axios(url).then(()=>{
})
jsonp跨域
安装jsonp
import jsonp from ‘jsonp’
mounted(){
let url = 'https://www.imooc.com/common/adver-getadverlistbymarking?marking=global_newcomer';
jsonp(url,()=>{
})
}
代理跨域
在vue中创建一个 vue.config.js的文件
moduel.exports = {
devServer:{
host:"localhost",
port:8080,
proxy:{
'/api':{
target:'www.baidu.com',
changeOrigin: true,
pathRewrite:{
'api': ''
}
}
}
}
}
这样就可以直接使用axios去获取数据了
使用axios的时候可以使用VueAxios这样就不用在每个页面都引用
在mian.js中统一引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
这样在其他页面中可以使用 this.axios…