【无标题】前端跨域问题及解决方法

什么是跨域

跨域指的是浏览器不能执行其他网站脚本，它是有浏览器的同源策略造成的，是浏览器对js是假的安全限制，防止他人恶意攻击网站
比如一个黑客，他利用iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名和密码登陆时，如果没有同源策略，他的网页就可以通过js读取到你的表单中输入的内容，这样用户名和密码就轻松到手了。

解决方式

1、jsonp
原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制的特性，去请求第三方服务器的数据内容。
步骤

1. 创建一个script标签；
2. script的src属性设置接口地址；
3. 接口参数，必须携带一个自定义函数名，要不然后台无法返回数据；
4. 通过定义函数名去接收后台返回数据；

	//创建一个script代码块
	var script = document.createElement("script");
	//script的src属性设置接口地址，并带一个callback回调函数名称
	script.src - "HTTP://127.0.0.1:8080/index.php?callback=jsonpCallback(data)";
	//插入到页面
	document.head.appendChild(script);
	//通过定义函数名去接收后台返回数据
	function jsonpCallback(data){
		//注意：jsonp返回的数据是json对象，可以直接使用。
		//Ajax取得的数据是json字符串，需要转换成json对象才能使用。
	}

2、CORS：跨域资源共享
原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器会允许跨域请求
限制：浏览器需要支持HTML5，可以支持POST、PUT等方法，兼容IE9以上
需要后台设置：Access-Control-Allow-Origin:* //允许所有域名访问
或者：Access-Control-Allow-Origin:HTTP：//a.com //只允许所有域名访问

还有很多其他好的方法，这里只列举这两种简单易懂的方法