跨域解决方案详解：从CORS到JSONP

跨域是指在浏览器中，从一个域名的网页去访问另一个域名的资源，会受到同源策略的限制。以下是解决跨域问题的一些方法：

1. JSONP

JSON

function jsonp(url, params, callback) {
  const script = document.createElement('script');
  const src = `${url}?${params}&callback=${callback}`;
  script.src = src;
  document.body.appendChild(script);
}
jsonp('http://example.com/api', 'userid=123', 'callback');

服务器端需要将返回结果包装在函数里返回，如下所示：

callback({ name: 'John Doe', age: 30 });

2. CORS

CORS（跨域资源共享）是一种跨域解决方案，它通过在服务器端设置响应头来实现。需要在服务器端添加以下头信息：

Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

同时，客户端需要发送带有 Origin 属性的 HTTP 请求，如下所示：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api');
xhr.setRequestHeader('Origin', 'http://www.example.com');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

3. 代理

使用代理服务器可以实现跨域请求。具体方法是在同一域名下创建一个服务器，用于将客户端请求转发到目标服务器，如下所示：

const proxyUrl = '/proxy?url=http://example.com/api';
const xhr = new XMLHttpRequest();
xhr.open('GET', proxyUrl);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();