前端常见跨域解决方案（全）

前端常见跨域解决方案，主要是因为浏览器同源策略（Same Origin Policy）的限制，导致一个域名下的前端代码无法直接请求另一个域名的资源，这就是所谓的“跨域”。

下面介绍几种前端常见的跨域解决方案。

1. JSONP

JSONP 是前端跨域解决方案中最简单、最常用的一种。它通过动态创建 <script> 标签，再请求一个带有回调函数的接口，服务端将数据放在回调函数中返回，前端通过回调函数获取数据。

下面是一个示例：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url + '&callback=' + callback;
  document.head.appendChild(script);
}

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

jsonp('http://example.com/path/to/api', 'handleData');

2. CORS

CORS 是一种官方推荐的跨域解决方案。它通过在请求头中加入 Origin 字段来告诉服务端：这个请求来自哪个源，服务端可以根据这个信息来判断是否允许跨域请求。

下面是一个示例：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/path/to/api');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Origin', 'http://localhost:3000'); // 告诉服务端请求来自哪个源
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(JSON.stringify({
  name: 'John Doe'
}));

3. 代理

代理是一种更为通用的解决方案，它不仅可以用于前端跨域，还可以用于后端跨域。代理的原理很简单：前端请求同域下的接口，同域下的接口再请求跨域接口，将数据返回给前端，前端拿到结果。

下面是一个示例：

// 后端代码
const express = require('express');
const request = require('request');
const app = express();
app.get('/api', function(req, res) {
  const url = 'http://example.com/path/to/api?query=' + req.query.query;
  req.pipe(request(url)).pipe(res);
})
app.listen(3000);

// 前端代码
fetch('http://localhost:3000/api?query=something')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  });

以上就是前端常见跨域解决方案的完整攻略。需要注意的是，每种解决方案都有其适用的场景，具体使用哪种解决方案，需要根据具体情况来选择。