简单易懂的JSONP和CORS跨域方案详解

当我们想要实现一个跨域请求的时候，经常会遇到浏览器的同源策略的限制。JSONP和CORS就是两种常用的跨域方案。

1. JSONP

JSONP（JSON with Padding）是一种实现跨域请求的技术。通过在前端动态创建script标签，来向指定域名发送跨域请求。服务端接收到请求之后，会将数据通过一个指定的回调函数包裹起来，返回给前端。这个回调函数的名称一般是客户端指定的。

示例：

前端代码

function jsonp(url, callback) {
  let script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
  window[callback] = (data) => {
    document.body.removeChild(script);
    callback(data);
  };
}

jsonp('http://www.example.com/api?callback=getData', (data) => {
  console.log(data);
});

服务端返回数据

getData({name: "Tom", age: 18});

在上述的示例中，我们先动态创建了一个script标签，并指定了请求的url和一个回调函数的名称。然后，在服务端接收到请求之后，将需要返回的数据通过指定回调函数的名称包裹起来返回。

在前端，我们通过绑定回调函数来接收数据。

JSONP的优点在于它非常简单易用，能够在绝大多数的浏览器环境下运行。但是它的缺点在于安全性问题。由于客户端指定回调函数，因此容易受到XSS攻击。

2. CORS

CORS（Cross-origin Resource Sharing，跨域资源共享）是一种更为安全和灵活的跨域请求技术。通过在请求头中携带额外的信息，以告知服务器当前请求的来源，并询问服务器是否允许跨域请求。

示例

前端代码

fetch('http://www.example.com/api', {
  mode: 'cors'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

服务端代码

const express = require('express');
const app = express();

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); // Allow specified origin
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // Allow specified HTTP methods
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // Allow specified HTTP headers
  res.header('Access-Control-Allow-Credentials', 'true'); // Allow cookie
  next();
});

app.get('/api', function(req, res) {
  res.json({name: 'Tom', age: 18});
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

在上述示例中，我们在前端通过fetch函数发起了一个CORS请求，并指定了请求模式为cors。在服务端，我们通过设置响应头来允许跨域请求，包括指定允许的来源、HTTP方法、HTTP头和是否允许cookie。在GET请求的API路径上，我们返回了一些数据。

CORS的优势在于它相对于JSONP更为安全，可以通过设置响应头来对各种跨域请求进行精确的控制和限制。同时，它能够支持各种类型的HTTP请求。

总的来说，JSONP和CORS都是常用的跨域请求技术，选择哪个技术一般取决于具体的场景和需求。如果只需要实现一个简单的跨域请求，则JSONP是一个不错的选择，而对于更为复杂的请求，则应当使用CORS技术。