前端基础问题：跨域

摘要

跨域是指在 Web 开发中，当一个网页的源（origin）与另一个网页的源不同时，就会发生跨域。源由协议、域名和端口号组成。如果两个 URL 的协议、域名和端口号中任何一个不同，就被认为是跨域。

跨域限制是由浏览器实施的安全策略，它防止一个网页的脚本通过在其他网页的上下文中执行来窃取敏感信息或执行恶意操作。浏览器会限制跨域请求，例如通过 XMLHttpRequest 或 Fetch API 发送的跨域 HTTP 请求通常会被拒绝，除非目标服务器明确允许这样的请求。

跨域的主要解决方案

• Jsonp 主要是借助了 <script> 标签上的 src 属性不受同源策略的影响这一机制。
• Node代理 是指用 Node 服务器代理客户端和目标服务器之间的网络请求。服务器与服务器之间没有同源策略，Node 代理服务器监听客户端请求，转发给目标服务器，再接收响应发给客户端。
• Nginx代理 的原理跟 Cors 差不多，常用于项目上线。
• document.domain
• postMessage

一、Cors

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

在后端响应头添加access-control-allow-origin字段提示允许这些源跨域。

const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200,{
        // 'access-control-allow-origin':'*'//允许所有源
        'access-control-allow-origin':'http://127.0.0.1:5501'//自己的前端
    })
    let data ={
        msg:'Hello world'
    }
    res.end(JSON.stringify(data));
});

server.listen(3000,()=>{
    console.log('Server is running on port 3000');
});

二、Jsonp

JSONP（JSON with Padding）是一种解决跨域请求的方法，通常用于在浏览器中通过 <script> 标签获取跨域数据。JSONP的基本原理是利用了 <script> 标签的跨域特性，通过动态创建 <script> 标签来请求远程服务器的资源，从而绕过浏览器的同源策略。

<button id="btn">获取数据</button>
<!-- <script src="http://localhost:3000?cb=callback"></script> -->
<script>
    function jsonp(url,cb){
        return new Promise(function(resolve, reject){
            const script = document.createElement("script");
            script.src = `${url}?cb=${cb}`;//http://localhost:3000?cb=callback
            document.body.appendChild(script);
            window[cb] = function(data){
                resolve(data);
            }
        })
    }
    let btn = document.getElementById('btn');
    btn.addEventListener('click',()=>{
        jsonp('http://localhost:3000','callback')
        .then(res=>{
            console.log('后端响应的数据:',res);
        })
    })
</script>

三、Node代理

Node 代理是指使用 Node 编写的服务器应用程序，用于代理客户端和目标服务器之间的网络请求。通过 Node 代理，可以在服务器端拦截客户端发出的请求，并将这些请求转发到目标服务器，然后将目标服务器的响应返回给客户端。

因为 Vite 是用 Node 写的，官方提供了一个代理的功能

只需在 vite.config.js 文件中配置开发服务器的自定义代理规则：

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy:{
      '/api':{
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
})

四、Nginx代理

Nginx代理是指使用Nginx作为反向代理服务器，接收客户端发来的请求，然后将这些请求转发到其他服务器上进行处理，并将处理结果返回给客户端。Nginx是一种高性能的Web服务器和反向代理服务器，因其性能优异、配置简单而被广泛应用于互联网领域。

编辑 Nginx 的配置文件（nginx.conf）。

server {
    listen       2222;
    server_name  localhost;
    
    location / {
        root   html;
        index  index.html index.htm;
    }

    location /api {
        proxy_pass  http://127.0.0.1:3000;
        add_header  Access-Control-Allow-Origin *;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

将 localhost:2222/api 路径下的请求转发到http://127.0.0.1:3000来代理，并且添加响应头 Access-Control-Allow-Origin *，设置白名单，允许跨域请求，这里类似 Cors 。

const http = require('http');
const server = http.createServer((req, res) => {
    let data ={
        msg:'Hello nginx-proxy'
    }
    res.end(JSON.stringify(data));
});
server.listen(3000,()=>{
    console.log('Server is running on port 3000');
});

后端提供数据

<button id="btn">获取数据</button>
<script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click',()=>{
        fetch('http://localhost:2222/api')
        .then(res=>res.json())
        .then(data=>{
            console.log(data);
        })
    })
</script>

五、window.postMessage

window.postMessage  方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage  方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

<h2>父级页面</h2>
<iframe src="http://127.0.0.1:5501/postMessage/child.html" id="iframe" width="100px" height="100px"></iframe>
<script>
    let iframe = document.getElementById('iframe');
    iframe.onload = function () {
        let data = {
            msg:'父页面的数据'
        }
        iframe.contentWindow.postMessage(JSON.stringify(data),'http://127.0.0.1:5501');
    }
    //监听子页面传过来的数据
    window.addEventListener('message',(e)=>{
        console.log(e.data);
    })
</script>

在父级页面中嵌入了一个 <iframe> 元素，当它加载完成，使用 contentWindow.postMessage() 方法，向 iframe 发送了一个消息，目标地址为 http://127.0.0.1:5501。并且监听有没有消息传回来。

<h2>子级页面</h2>
<script>
    window.addEventListener("message", function (e) {
        console.log(JSON.parse(e.data));
        if(e.data){
            setTimeout(()=>{
                window.parent.postMessage('子页面的数据','http://127.0.0.1:5501')
            },1000)
        }
    })
</script>

总结

以上是我自己工作中遇到的一些跨域解决方法，如果描述不当欢迎指出。

Tips：跨域问题基本都是后端解决为主！