前端实现跨域的三种方式

前端解决跨域的三种方式：
1.cors跨域（只需要后端配置）
header(“Access-Control-Allow-Origin:*”); // 允许任何来源
header(“Access-Control-Allow-Origin:http://me.com”);//只允许来自域名http://me.com的请求
2.jsonp跨域：（需要前后端一起配合）
jsonp跨域只能解决get请求的跨域，再前端中，不管是script标签的src属性，还是img标签的src属性，还是a标签的href属性，其实都不受同源策略的限制。jsonp跨域就是巧妙的运用了这一特性实现的跨域

实现方法：在点击发送按钮之前，创建一个script标签，给script标签的src属性设置为服务器的请求地址，参数用问好拼接，callback参数是用来接受请求返回值的参数，所以一定要写！

<button click="sendFunc()">点击发送请求</button>

<script>
	function sendFunc(){
		let frame = document.createElement('script');
		frame.src = 'http://localhost:5000/api/list?name=zhang&age=18&callback=func;
		document.('body').append(frame);
	};
	function func(res){
		console.log(res);//这里就是sendFunc请求返回的结果
	}
}
</script>

服务器端实现：

router.get('/api/list', (req, res) => {
  console.log(req.query, '123');
  let data = {
    message: 'success!',
    name: req.query.name,
    age: req.query.age
  }
  data = JSON.stringify(data)
  res.end('func(' + data + ')');//func和前端函数名保持一致

3.代理服务器proxy：
可以配置多个代理，且可以灵活控制请求是否走代理。
vue.config.js

module.exports={
	pages:{
		index:{
			//入口
			entry:'src/main.js',
		},
	},
	lintOnSave:false,//关闭语法检查
	//开启代理服务器 方法一
	// devServer:{
		//paroxy:'http://localhost:5000',//5000服务器端口号，
	// },
	//方法二：
	devServer:{
		proxy:{
			// 请求前缀/api，只有加了/api前缀的请求才会走代理(前端自定义)
			'/api':{
				target:'http://localhost:5000',
				pathReweite:{'^/api':''},//重写
				//ws:true,//用于支持websocket
				changeOrigin:true,//用于控制请求头中的host值，默认true，react中默认false
			}
		}
	}
}

发送请求
methods:{
	getFunc(){
		//8080为vue-cli本地启动的端口号，因为设置了代理服务器
		axios.get('http://localhost:8080/api/students').then(res={
			console.log('请求成功',res)
		},error=>{
			console.log('请求失败',error)
		})
	}
}