前端跨域的几种方式

同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。

在这里插入图片描述
三种跨域方法
第一个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…
在这里插入图片描述

发布了42 篇原创文章 · 获赞 19 · 访问量 8592
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览