前端需要理解的跨域问题

4、跨域

1、JSONP

JSONP是一种通过script标签进行跨域请求的技术。JSONP的实现原理是利用script标签的跨域能力，在服务端将数据包装成一个函数的调用，然后通过script标签的src属性发送到客户端，客户端接收到响应后会自动执行该函数。JSONP只能进行GET请求。

使用JSONP的过程中，前端需要定义一个回调函数名，并将该函数名作为请求参数发送到服务端。服务端接收到请求后，将返回的数据包装成一个函数的调用，并将回调函数名作为函数名返回给前端。前端接收到响应后，会自动执行该函数并传入服务端返回的数据。

下面是一个简单的JSONP请求的示例代码：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url + '?callback=' + callback;
  document.head.appendChild(script);
}

function handleResponse(response) {
  console.log(response);
}

jsonp('http://example.com/data', 'handleResponse');

上面的代码中，jsonp函数接收两个参数：要请求的URL和回调函数名。在函数内部创建一个script标签，将URL和回调函数名作为参数拼接成一个完整的URL，设置到script标签的src属性中。然后将该标签插入到文档中，浏览器会自动发送请求并执行服务端返回的回调函数。

服务端需要接收callback参数，并将返回的数据以该函数调用的形式返回给前端，例如：

handleResponse({
  data: {
    name: 'John',
    age: 25
  }
});

需要注意的是，JSONP只能进行GET请求，并且存在安全隐患，因为服务端返回的数据会直接执行在前端页面中，如果返回的数据被篡改，可能会导致安全问题。因此，建议在使用JSONP时，只请求可信的数据源。

2、CORS

CORS（Cross-Origin Resource Sharing）是一种现代浏览器提供的跨域解决方案，它通过在服务器端设置响应头来允许浏览器跨域访问资源。CORS 在客户端发起跨域请求时，首先会进行一次"预检"请求，该请求为 OPTIONS 请求，向服务端请求是否允许跨域访问。如果服务端同意跨域访问，则在实际请求时会带上一个 Access-Control-Allow-Origin 响应头，该响应头会指定哪些域名被允许跨域访问该资源。

实现 CORS 需要在服务端设置响应头，常见的响应头有：

• Access-Control-Allow-Origin：允许哪些域名跨域访问该资源，可以设置为具体的域名或通配符*。
• Access-Control-Allow-Methods：允许哪些 HTTP 方法访问该资源，比如 GET、POST、PUT 等。
• Access-Control-Allow-Headers：允许哪些自定义头信息跨域访问该资源。
• Access-Control-Expose-Headers：允许哪些头信息被 JavaScript 访问，不设置则默认只能访问以下头信息：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

以下是一个使用 Express 实现 CORS 的示例：

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/', (req, res) => {
  res.send('Hello CORS!');
});

app.listen(3000, () => {
  console.log('CORS server is listening on port 3000');
});

在上述示例中，我们在所有路由的中间件中设置了允许所有域名跨域访问，允许 GET、POST、PUT、DELETE 方法访问，允许 Content-Type 自定义头信息访问。

在 Vue 应用中，我们可以使用 Axios 库发送跨域请求，只需要在请求头中设置withCredentials: true和crossDomain: true即可。

axios.get('http://localhost:3000', { withCredentials: true, crossDomain: true })
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

3、代理

通过在自己的服务器上设置一个代理服务器，将跨域请求转发到目标服务器，从而实现跨域请求。

具体而言，当前端应用程序向代理服务器发送一个请求时，代理服务器会将该请求转发给后端服务器，并将响应返回给前端应用程序。由于代理服务器和后端服务器是在同一域中的，因此可以避免跨域问题。

在使用跨域代理时，我们需要在前端应用程序中设置代理的地址，以便让前端应用程序向代理服务器发送请求。在Vue.js中，我们可以使用vue.config.js文件来配置代理。下面是一个简单的示例：

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上面的代码将代理地址配置为http://localhost:3000，当前端应用程序发送带有/api前缀的请求时，会被代理服务器转发到http://localhost:3000地址。changeOrigin参数设置为true表示将请求头中的Host字段设置为目标地址，pathRewrite参数用于重写请求路径，将/api前缀替换为空字符串。

在使用跨域代理时，我们需要注意代理服务器的安全性，防止代理服务器被恶意利用。

4、postMessage

在HTML5中，新增了一种跨域通信方式——postMessage。通过使用postMessage函数，在不同的窗口或iframe之间传递数据，从而实现跨域通信。

具体来说，使用postMessage实现跨域通信的步骤如下：

1. 在发送消息的窗口中获取目标窗口的引用，可以通过window.open打开新窗口，也可以通过iframe嵌入目标窗口。
2. 使用postMessage方法向目标窗口发送消息，该方法接收两个参数，第一个参数是要传递的消息，第二个参数是目标窗口的origin，即窗口所在的协议、主机名和端口号的组合，这是为了确保只有目标窗口可以接收消息，而不是其他恶意网站。
3. 在目标窗口中监听message事件，一旦接收到消息，就可以进行相关处理。

下面是一个使用postMessage实现跨域通信的简单示例代码：

在发送消息的窗口中：

// 获取目标窗口的引用
const targetWindow = window.open('http://example.com');

// 向目标窗口发送消息
targetWindow.postMessage('hello', 'http://example.com');

在接收消息的窗口中：

// 监听message事件
window.addEventListener('message', event => {
  // 判断消息来源是否为指定的域名
  if (event.origin !== 'http://example.com') {
    return;
  }

  // 输出收到的消息内容
  console.log(event.data);
});

需要注意的是，postMessage虽然可以跨域通信，但也存在一些安全风险，如受到CSRF攻击和窃取信息等。

5、WebSocket

WebSocket是一种全双工通信协议，它建立在TCP协议之上，通过一个HTTP请求进行握手，建立连接后，服务器端和客户端可以在任何时候相互发送数据，从而实现跨域通信。

需要注意的是，以上解决方案都需要在服务器端进行配置或支持，前端仅能通过相应的方法来请求并获取跨域资源，而不能直接解决跨域问题。