跨域

Ajax请求限制

Ajax只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的HTML文件只能向A网站服务器中发送Ajax请求，B网站中的HTML文件只能向B网站中发送Ajax请求，但是A网站是不能向B网站发送Ajax请求的，同理，B网站也不能向A网站发送Ajax请求。

什么是同源？

• 如果两个页面拥有相同的协议、域名、端口，那么这两个页面就属于同一个源，其中只要一个不相同，就是不同源。

为什么有同源策略

• 同源策略是为了保证用户信息的安全，防止恶意的网站窃取数据，最初的同源策略是指A网站在客户端设置的Cookie，B网站是不能访问的。
• 随着互联网的发展，同源策略也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。

最初解决方法：JSONP

使用JSONP解决同源策略问题
jsonp是json with padding的缩写，它不属于Ajax请求，但它可以模拟Ajax请求。

1. 将不同源的服务器的请求地址写在script标签的src属性中
   <script src="www.a.com"></script>
2. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
   const data = 'fn({name: 'zhangsan', age: '20'});
res.send(data)
3. 在客户端全局作用域下定义函数fn
   function fn (data) { ... }
4. 在fn函数内部对服务器端返回的数据进行处理
   function fn (data) { console.log(data)}

安全可靠的解决方法：CORS跨域资源共享(ECMA荐)

CORS:全称为Cross-origin resource sharing, 即跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求，克服了Ajax只能同源使用的限制

服务器端设置

app.use((req, res, next) => {
  // 允许哪些客户端访问
  // * 允许所有客户端访问
  res.header('Access-Control-Allow-Origin', '*')
  // 允许客户端使用哪些请求方法访问
  res.header('Access-Control-Allow-Methods', 'get|post|get, post')
  next()
})

待更新...