web前端跨域问题简介及其常见解决方案

前言

最近在做一个小web项目，需要从一个接口获取XML数据，具体数据用浏览器可以直接打开，大概长这样：

其实就是一些球赛的数据。。。 然后神奇的是，当我在自己的站点尝试用ajax去获取数据的时候，竟然有如下的报错信息：

Access to XMLHttpRequest at 'http://free.win007.com/vbsxml/change.xml’from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

翻译一下就是咱的ajax请求，被【CORS规范】给拦截了，百度了一通发现是跨域了。什么是跨域？为啥不能跨域？图个啥？那么为了解决这个问题，需要搞懂跨域是什么，于是记录下来这篇文章。。。

跨域问题简介

一句话：用户当前正在访问页面A，页面A的JavaScript代码向页面B发送请求，当页面AB的 域名（或子域名），端口号，协议（http or https） 中任意一个不同，即构成跨域请求。

比如

域名不同构成跨域
http://www.baidu.com
http://www.taobao.com

协议不同构成跨域
http://www.baidu.com
https://www.baidu.com

端口不同构成跨域
http://localhost:114
http://localhost:514

我们通过一个简单的栗子尝试一下跨域请求：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://free.win007.com/vbsxml/change.xml");
xhr.onreadystatechange = function() {
   
	if(xhr.readyState==4 && xhr.status==200) {
   
		console.log(xhr.responseXML);
	}
}
xhr.send();

浏览器会正常发送请求，但是不会受理跨域请求的响应（上图得不到响应的xml），因为同源策略认为跨域请求的响应内容并不安全。当时我就炸了，我想：我用浏览器能够正常访问xml数据：

也没见不安全啊，怎么就给爷拦截了呢？？？ 为什么不安全，怎么就