[网络协议]CORS与JSONP解决跨域问题

跨域

同源策略（同于限制）

同源策略是浏览器中的一种安全策略，（负责管理浏览器中数据访问的安全问题），默认情况下，在浏览器中，非同源的资源之间不允许相互访问

URL格式

协议：//域名：端口/资源路径？查询字符串#hash

同源：协议、域名、端口完全一致

主要三者中有任意一个不同，则就是非同源的资源，非同源资源间的访问叫做跨域

如：

http://localhost:3000/index.html
http://localhost:3000/html/login.html
http://localhost:3000/assets/images/5.png
https://localhost:3000/html/register.html
http://127.0.0.1:3000/style/style.css
http://127.0.0.1:9527/index

跨域访问时，会报告类似如下的错误信息：

Access to XMLHttpRequest at 'http://localhost:3000/exist' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决跨域的方案

CORS

跨域资源共享，允许浏览器跨域发送ajax请求，克服ajax只能在同源中访问的限制

cors需要浏览器和服务器共同支持，目前所有的浏览器都支持该功能，所以通常cors现在是在服务端设置即可，浏览器端仍然使用ajax请求资源

cors跨域，设置响应头信息

(1)Access-Control-Allow-Origin: *
(2)Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
(3)Access-Control-Allow-Headers: *

JSONP

JavaScript Object Notation Padding

原理：

在浏览器端，利用<script>引入外部资源时，不受同源策略限制的特点，来实现跨域资源访问。

实现：

• 服务端：在向浏览器端返回数据时，返回数据的格式是一个JS中函数调用结构的数据

• 浏览器端

  （1）动态创建script元素

  （2）设置script元素的src属性，在URL中处理响应数据的函数名称给服务端

  （3）将创建的script元素添加到DOM树结构中

  （4）创建全局的用于处理响应数据的函数

  （5）将添加到DOM树结构中的script元素节点删除

  注意：JSONP处理的是GET请求方法的跨域

百度提示：https://www.baidu.com/sugrec?prod=pc&wd=搜索的关键字&cb=回调函数名称