跨域是什么?如何解决并手写一个jsonp

跨域是指浏览器为了安全性，实施的同源策略。同源策略要求，只有协议、域名和端口号完全相同的网页，才能共享资源。如果不满足这些条件，就会产生"跨域"。

解决跨域的常见方法有以下几种：

CORS（跨源资源共享） ：服务器设置相应的 HTTP 头部 Access-Control-Allow-Origin。这是最常用的跨域解决方案。

// 服务器端设置 HTTP 头部

javascript 复制代码

res.setHeader('Access-Control-Allow-Origin', '*');

JSONP（JSON with Padding） ：通过动态创建 <script> 标签来调用服务器提供的回调函数。这种方法只能用于 GET 请求。

javascript 复制代码

// 客户端
function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'http://www.domain.com?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);

// 服务器端
res.end(`handleResponse(${JSON.stringify(data)})`);

代理服务器：通过后端服务器转发请求和响应，避免浏览器直接请求不同源的资源。

javascript 复制代码

// Node.js 服务器端
const request = require('request');
app.get('/proxy', function(req, res) {
  const url = 'http://www.domain.com' + req.url;
  req.pipe(request(url)).pipe(res);
});

PostMessage：HTML5 引入的一种新的 API，可以实现跨源通信。

javascript 复制代码

// 页面 A
window.postMessage('message', 'http://www.domain-b.com');

// 页面 B
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://www.domain-a.com') return;
  console.log(event.data);
}, false);

WebSockets：WebSockets 是一种通信协议，由于其是双向通信，且在建立连接后可以直接发送数据，因此不受同源策略限制。

以上就是解决跨域问题的常见方法，需要根据具体的场景和需求来选择合适的方法。

JSONP（JSON with Padding）是一种跨域数据交互的方法。它的基本思想是，网页通过添加一个 <script> 标签，向服务器请求 JSON 数据，这种做法不受同源策略限制；服务器收到请求后，将数据放在一个指定名字的 JavaScript 函数中返回。

以下是一个 JSONP 的基本实现：

javascript 复制代码

// 客户端
function jsonp(url, callback) {
    // 创建 script 标签并加入到页面中
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 创建一个全局函数，并将函数名传给服务器请求
    var callbackName = 'jsonp_callback_' + Math.random().toString().replace('.', '');
    window[callbackName] = function(data) {
        // 在这个全局函数中处理服务器返回的数据
        callback(data);

        // 数据处理完后删除此函数及 script 标签
        delete window[callbackName];
        document.body.removeChild(script);
    }

    // 设置请求 URL
    script.src = url + '?callback=' + callbackName;
    document.body.appendChild(script);
}

// 使用 JSONP
jsonp('http://www.example.com', function(data) {
    console.log(data);
});

在这个例子中，客户端创建了一个全局函数，并将函数名作为参数传给服务器。服务器将数据放在这个函数中返回。客户端的全局函数收到数据后进行处理。

请注意，JSONP 只能用于 GET 请求，不能发送 POST 或其他类型的 HTTP 请求。而且，由于它是通过插入 <script> 标签来工作的，所以如果服务器被恶意利用，可能会有安全问题。

跨域是什么?如何解决 并手写一个jsonp

跨域是什么?如何解决并手写一个jsonp