什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
所谓同源是指，域名，协议，端口均相同，下图可以很清楚的分辨出是否同源
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
要解决跨域的问题，我们可以使用以下几种方法：
1. JSONP
原理
通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
实现方法
在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。
比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，我把这个数据放到自己用express搭建的服务器上了，http://localhost:3000，那么a.html中的代码就可以这样：
我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。
因为是当做一个js文件来引入的，所以http://localhost:3000返回的必须是一个能执行的js文件，所以这个页面的后台代码可能是这样的：
最终输出的结果是{"name":"wwr","hobby":"sing","say":"hahhahhlalalala"}.
这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
2. cors
全称：cross-origin resources sharing 跨域资源共享
原理
CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
假设我们的项目在本地页面，而我们打算从http://127.0.0.1:5500请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。
利用 CORS，http://127.0.0.1:5500只需添加一个标头，就可以允许来自本地页面的跨域请求。
前端相关设置
前端只需要创建一个ajax对象，如下图所示
服务器端的设置
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
通过‘响应头’，设置允许跨的域（协议+域名+端口），如果想让所有的网站都能跨域，设置为‘*’。
3. 服务器代理跨域请求
原理
前端如果有跨域请求，那么把跨域请求让后端代理请求，等后端请求到数据后，把数据返回给前端。
比如我们的项目在http://localhost:3000/proxy，但是我们想请求https://cnodejs.org/api/v1/topics这个页面的数据，可以通过服务器代理的方法去实现。
前端相关设置
依然是创建一个ajax对象
服务器端相关设置
网友评论