一.什么是跨域
二.为什么要跨域
三.如何解决跨域
四.跨域的解决方案
一.什么是跨域
（1）违反了浏览器的同源策略就叫做跨域（官方解释点这 --->同源策略），这也是发生跨域的根本原因。
同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
（2）对于 “违反了浏览器的同源策略就叫做跨域” ，我们可以这样理解。在发送ajax请求时，请求目标 的 url 与本机的 url，如果这两个 url 的协议、主机地址、端口都相同，那么这两个 url 是同源的。即这两个 url 是同源的，自然不会发生跨域。
如果这两个 url 的协议、主机地址、端口，三个条件中有一个条件不符合，就是违反了浏览器的同源策略，就是发生了浏览器的跨域。
我们可以参考如下图，帮助了解（官方的截图）
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：
二.为什么要跨域
（1）对于某些资源来说，这些资源很可能放在不同的服务器上，所以很大可能就导致了非同源，而请求不同源的资源就需要跨域。
（2）并且同源策略是客户端浏览器的自我保护机制。
这是为了保证用户的信息安全和防止恶意攻击。如果没有同源策略，那么一个网站就可以访问另一个网站的用户信息，这是非常危险的。
注意：跨域问题只出现在客户端浏览器上。 如安卓端浏览器是不存在跨域问题的
三.如何解决跨域
对于解决跨域问题，本次主要介绍三种方式。三种方式各有千秋
（1）通过 JSONP 方式
（2）通过 CORS 方式
（3）通过代理服务器转发方式
3.1 通过 JSONP 方式
（1） JSONP 是什么
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，但只支持get 请求。所以使用 JSONP 方式解决跨域还是存在很大的限制。
（2）JSONP 怎么工作的
在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP 就是利用script 标签的跨域能力来发送请求的。
（3）JSONP 的使用
html 代码：
//1. 创建 script 标签
const script = document.createElement('script');
//2. 设置标签的 src 属性
script.src = 'http://127.0.0.1:8000/check-username?callback=abc';
//3. 将script 添加到body 中
document.body.appendChild(script);
function abc(data) {
alert(data.name);
};发送 ajax 代码：
app.get("/check-username" , function (req , res) {
var callback = req.query.callback;
const data = {
name: '孙悟空'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果(一段可执行的JavaScript代码)
response.end(`handle(${str})`);
});3.2 通过 CORS 方式
（1）CORS 是什么
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源
（2）CORS 是什么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。
（3）CORS 的使用
主要是服务器端的设置：
router.get("/testAJAX" , function (req , res) {
//通过res 来设置响应头，来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");//允许所有来源访问
res.send("testAJAX 返回的响应");
});3.3 通过代理服务器转发方式
（1）跨域只在浏览器中出现，这是 node 代理服务器（对于平常的学习或者项目来说，代理服务器一般使用的就是代理服务器），所以是不会出现跨域的。
（2）对于使用目标服务器（后端服务器），我选择使用的是 mongodb 服务器，它的语言是 No-SQL 类似于 JS 对象，对我们前端友好。
***********************************************************
mongodb 服务器 的软件与安装教程在网盘内，自取
链接：https://pan.baidu.com/s/1N_JgvjrNqvgNPWTdpJohaQ
提取码：8z9q
****************************************************************
对于安装 mongodb 后，如果无法连接服务器，出现
“连接本地mongo数据库失败:connect ECONNREFUSED: :1:27017” 的问题 可参考
https://blog.csdn.net/jian091309/article/details/131839214
四.跨域的解决方案
最佳的方案肯定是将前端项目部署到和接口同源的服务器上，但是这种方案行不通，因为不可能前端写完一个功能就又要后端去部署到服务器。
所以更加推荐通过代理服务器转发方式去解决跨域问题。