AJAX同源策略与解决跨域请求问题

AJAX同源策略

同源策略（same-Origin-Policy）最早由Netscape公司出的，是浏览器的一种安全策略

同源：协议，域名，端口号必须完全相同

违背同源策略就是跨域

如何解决跨域问题

CORS跨域资源共享

CORS(Cross-Origin Resource Sharing)，跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和 post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

只需要在服务端请求内加上这句话(稍暴力)

response.setHeader('Access-Control-Allow-Origin', '*'); //设置允许跨域访问

JSONP

JSONP是什么

JSONP(ISON with Padding)，是一个非官方的跨域解决方案，也不知道是哪个大聪明想出来的（，不过只支持get 请求

JSONP怎么工作的?

在网页有一些标签天生具有跨域能力，比如: img link iframe script .JSONP就是利用script标签的跨域能力来发送请求的。

JSONP的使用

• 动态的创建一个script标签
• 设置script的src，设置回调函数

分析一下，其实就是利用script标签的请求是可以随便跨域的，不会弹出警告，所以，我们需要请求的时候先创建一个script标签，然后直接把要请求的接口写在script标签内的src里面，然后使用回调函数获取到请求返回的值

但是，这样的话，接口返回的数据就必须是标准的js格式的代码，否则就会报错，所以JSONP只能用于GET请求上

前端代码：

document.querySelector('button').onclick = function() {
    //删除已存在的script
    document.querySelector('#get') && document.querySelector('#get').remove();
    //创建一个专用的script标签作为跳板
    let s = document.createElement('script');
    s.src = 'http://127.0.0.1:8000/jsonp';
    s.setAttribute('id', 'get');
    document.querySelector('body').appendChild(s);
};
//创建一个handle函数
function handle(data) {
    document.querySelector('p').innerHTML = data.name + " " + data.age
}

node端：

//曲线救国解决跨域问题
app.all('/jsonp', (request, response) => {
    const data1 = { name: "kano", age: 18 };
    //对象转换为字符串+模板字符串
    response.send(`handle(${JSON.stringify(data1)})`);
});