前端跨域处理

跨域

协议 域名 端口有一个不同即为跨域，跨域是因为浏览器要遵循同源策略，即使相应成功，也被浏览器拦截下来。

vue项目的本地跨域解决办法（代理）

axios的baseUrl设置成/api
vue.config.js

module.exports = {
  //打包app时放开该配置
  publicPath: './',
  devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: '真正的请求地址',  //真实的后台接口
        //ws: true,        //如果要代理 websockets，配置这个参数
        //secure: false, // 如果是https接口，需要配置这个参数（网上看到的，记录一下，target是https的请求没设置也是可以请求到的）
        changOrigin: true,  //允许跨域
        pathRewrite: {
          /* 重写路径*/
          '^/api': '' 
        }
      },
    }
  },
}

所有的接口都代理

devServer: {
	proxy: '真实请求地址'
}

jsonp

同源政策不会阻止js脚本执行，jsonp是动态生成script标签，调用服务器的js脚本，允许用户传递一个callback的参数，服务器在返回数据会把callback这个参数作为函数名包裹json数据，这样客户端就可以随意定制函数处理服务端返回的数据
缺点：只支持get请求

<script>
	var script = document.createElement('script');
	script.type = 'text/javascript';
	// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
	script.src = '接口地址?userId=123456&callback=handleCallback';
	document.head.appendChild(script);
	// 回调执行函数
	function handleCallback(value) {
		console.log(value) 
	}
</script>

postMessage跨域

IE8以上支持这个API
window.postMessage(data, origin)
data最好用JSON.stringfy()
origin为’*‘表示可以传递给任意窗口；为’/'传递给同源窗口；‘协议+ IP + 端口’
postMessage传递信息

document.addEventListener('message', function(e){
	//处理接收到的数据
	...
	// 传递信息
	window.parent.postMessage(data, origin)
})

document.domain实现跨域访问

只适用基础域名一样的页面
调用嵌入的iframe的js，会发生跨域，当前页面和iframe的基础域名一致的话，可以将两个页面的document.domain改成一致，解决跨域问题