跨域问题以及跨域的解决方案 为什么不是真正的AJAX

什么是跨域

 即 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

效果如下：

运行结果：

get请求和post请求都报错  即存在跨域问题

为什么会出现跨域

出于浏览器的同源策略限制。

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

跨域的解决方案

cors中间件解决跨域问题

 1.运行npm install cors

2.导入中间件 并调用中间件

运行效果：

什么是CORS

通过自定义请求头来让服务器和浏览器进行沟通

CORS（跨域资源共享）由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源

浏览器的同源安全策略默认会阻止网页“跨域”获取次元，但如果接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器的跨域访问限制

CORS注意事项

1.CORS主要在服务器端进行配置，客户端浏览器无需做任何额外配置，即可请求开启了CORS的接口

2.CORS在浏览器中有兼容性。只有支持XMLHttpRequest Level2的浏览器，才能正常访问开启了CORS的服务端接口

JSONP

JSONP通过同源策略涉及不到的“漏洞”，也就是像img中的src，link标签的href，script的src都没有被同源策略限制到

概念：浏览器通过script标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做JSONP

特点：

1.JSONP不属于真正的AJAX请求，因为它没有使用XMLHttpRequest这个对象

2.JSONP仅支持GET请求

创建JSONP接口的注意事项：

如果项目已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启CORS的接口

  

实现JSONP接口的步骤

1.获取客户端发送过来的回调函数的名字

2.得到要通过JSONP形式发送给客户端的数据

3.根据前两步得到的数据，拼接出一个函数调用的字符串

4.把上一步拼接得到的字符串，响应给客户端script标签进行解析执行

具体代码：

在网页中使用jQuery发起JSONP请求

调用$.ajax()函数，提供JSONP的配置项，从而发起JSONP请求，代码如下：

为什么不是真正的AJAX

1.这两种技术在调用方式上看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理

2.但是ajax和jsonp其实本质上时不同的东西。ajax的核心是通过XmlHttpRequesr获取本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本

3.所以说，其实两者的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域数据的获取

nginx代理跨域

nginx模拟一个虚拟服务器，因为服务器与服务器之间是不存在跨域的

发送数据时，客户端->nginx->服务端

返回数据时，服务端->nginx->客户端