同源政策（ajax）

一、Ajax请求限制

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

二、什么是同源

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

例如：

原网址：http://www.example.com/dir/page.html

http://www.example.com/dir2/other.html          同源

http://example.com/dir/other.html        不同源(域名不同)

http://v2.www.example.com/dir/other.html 不同源(城名不同)

http://www.example.com:81/dir/other.html 不同源(端口不同)

https://www.example.com/dir/page.html 不同源(协议不同)

三、同源政策的目的

        同源政策是为了保证用户信息的安全，防止恶意的网站动取数据，最初的同源改策是指A网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同游政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送 Ajax请求，如果请求，测览器就会报错。

四、使用JSONP解决同源限制问题

jsonp 是 json with padding 的缩写，它不属于Ajax请求，但它可以樹手Ajax请求。

1. 将不同源的服务器端请求地址写在 script 标签的 src 属性中

<script src="www.example.com"></script>

<script src="https://odn.bootoss.oce/jquery/3.3.1/jquery.min.js"></script>

  2.服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。   

const data = 'fn({name:“张三”,age:"20"})'; 
res.send(data);

3.在客户端全局作用域下定义函数（放在 script 标签的前面）

function fn (data) {    }

4.在fn函数内部对服务器端返回的数据进行处理

function fn (data) { console.log (data); }

将非同源服务器端的请求地址写在 script 标签的src属性中

 例如：

<script src="http://localhost:3001/test"></script>