跨域

跨域是指浏览器从一个域名的网页去请求另一个域名下的资源时，由于浏览器的同源策略，导致请求被限制的一种现象。以下是关于跨域的详细介绍：

同源策略

• 定义：同源策略是浏览器的一种安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。同源指的是协议、域名、端口号都相同，如果有任何一项不同，就会产生跨域问题。
• 目的：主要是为了防止恶意网站通过脚本等方式获取用户在其他网站的敏感信息，保障用户的信息安全和网站的正常运行。

跨域的常见场景

• 不同域名：例如，一个网站的页面位于http://www.example1.com，而它需要请求http://www.example2.com下的接口数据，这就属于跨域请求。
• 不同子域名：即使是主域名相同，但子域名不同，如http://sub1.example.com和http://sub2.example.com之间的请求，也会产生跨域问题。
• 不同端口：如http://www.example.com:8080向http://www.example.com:3000发送请求，由于端口不同，同样会被视为跨域请求。
• 不同协议：http://www.example.com和https://www.example.com之间的请求也会受到同源策略的限制，产生跨域问题。

跨域解决方案

• JSONP：
  • 原理：利用<script>标签不受同源策略限制的特点，通过动态创建<script>标签，将跨域请求的URL作为src属性的值，并在URL中添加一个回调函数名作为参数。服务器收到请求后，会将数据包装在这个回调函数中返回，浏览器在接收到响应后会自动执行回调函数，从而实现数据的获取。
  • 示例：

    <script>
    function handleData(data) {
            
    console.log(data);
    }
    var script = document.createElement('script');
    script.src = 'http://www.example2.com/api/data?callback=handleData';
    document.getElementsByTagName('head')[0].appendChild(script);
    </script>
    

  • 局限性：只能用于GET请求，并且需要服务器端的支持，对服务器的改动较大。
• CORS：
  • 原理：跨域资源共享（CORS）是一种基于HTTP头的机制，它允许服务器明确指定哪些源可以访问其资源。服务器通过在响应头中设置Access-Control-Allow-Origin等字段来控制跨域访问。
  • 示例：服务器端设置响应头：

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

  • 优势：支持多种HTTP请求方法，是目前比较常用的跨域解决方案，对客户端的改动较小，安全性相对较高。
• 代理服务器：
  • 原理：在客户端和目标服务器之间设置一个代理服务器，客户端先将请求发送到代理服务器，代理服务器再将请求转发到目标服务器，并将目标服务器的响应返回给客户端。由于客户端和代理服务器属于同源，因此避免了跨域问题。
  • 示例：在开发环境中，可以使用Webpack的devServer.proxy配置来设置代理服务器：

    module.exports = {
           
    //...其他配置
    devServer: {
           
    proxy: {
           
    '/api': {
           
      target: 'http://www.example2.com',
      changeOrigin: true,
      pathRewrite: {
           
        '^/api': ''
      }
    }
    }
    }
    };
    

  • 适用场景：适用于开发环境和一些对安全性要求较高的场景，但需要额外配置和维护代理服务器。
• WebSockets：
  • 原理：WebSockets是一种全双工通信协议，它在客户端和服务器之间建立了一个持久的连接，通过该连接可以进行双向数据传输。由于WebSockets的连接不受同源策略的限制，因此可以用于跨域通信。
  • 示例：客户端代码：

    const socket = new WebSocket('ws://www.example2.com/ws');
    socket.addEventListener('open', function (event) {
           
    socket.send('Hello Server!');
    });
    socket.addEventListener('message', function (event) {
           
    console.log('Received:', event.data);
    });
    

  • 特点：适用于实时性要求较高的应用场景，如在线聊天、实时数据更新等，但需要服务器端支持WebSockets协议。

跨域问题在Web开发中较为常见，开发人员需要根据具体的项目需求和场景选择合适的跨域解决方案。在实际应用中，CORS和代理服务器是比较常用的方法，而JSONP和WebSockets则适用于一些特定的业务场景。