《程序喵》项目跨域问题解决思路_项目偶尔报跨域-优快云博客

本文链接：https://blog.youkuaiyun.com/huangyuting98/article/details/131384975

文章介绍了浏览器的同源策略以及由此引发的跨域问题，探讨了四种常见的跨域解决方案：1)JSONP利用动态script标签实现；2)CORS通过设置Access-Control-Allow-*头信息允许跨域请求；3)使用Node.js作为中间件转发请求；4)配置代理服务器避免跨域限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域问题：由于浏览器的 同源策略 限制，当一个请求url的协议、域名、端口号三者之间有任意一个与当前的url不同即为跨域。

同源策略是一种约定，它是浏览器中最核心也最基本的安全功能。同源策略会阻止一个域的 Javascript 脚本和另一个域的内容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议(protocol)、主机(host) 和端口号 (port)。

博客系统项目中出现跨域问题是由于这是前后端分离项目，前端访问路径的端口和后端访问路径的端口不一致，因此出现了跨域问题，解决方案是对前端做跨域配置。

常见解决跨域问题的方式：

1. 使用 jsonp 来实现跨域请求：（jsonp函数封装）JSONP 方式实现跨域请求数据_jsonp跨域请求实现示例_TKOP_的博客-优快云博客

原理：通过动态构建 script 标签来实现跨域请求，因为浏览器对 script 标签的引入没有跨域的访问限制。

过程：通过在请求的url后指定一个回调函数，然后服务器在返回数据的时候，构建一个json数据的包装，这个包装就是回调函数，然后返回给前端。

前端接受到数据后，因为请求的是脚本文件，所以会直接执行，这样之前定义好的回调函数就可以被调用，从而实现了跨域请求的处理。

<body>
    <h2>A服务器的页面</h2>
    <button id="btn">向B发送jsonp请求</button>
    <script type="text/javascript">
        var btn = document.getElementById('btn');

        function jsonp(options) {
            // 处理其他参数的拼接
            var params = '';
            for (var k in options.data) {
                params += '&' + k + '=' + options.data[k];
            }
            // 响应处理函数
            var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
            window[fnName] = options.success;
            // 请求完整地址
            var url = options.url + '?callback=' + fnName + params;
            // 创建script标签
            var script = document.createElement('script');
            // 设置script标签的src属性
            script.src = url;
            // 将script标签追加到页面中
            document.body.appendChild(script);
            // 在script标签追加完成请求发送后将其删除
            script.onload = function() {
                document.body.removeChild(script);
                window[fnName] = null;
            }
        }
        btn.onclick = function() {
            jsonp({
                // 地址
                url: 'http://localhost:3001/jsonp3',
                // 其他请求参数
                data: {
                    name: 'tkop',
                    age: 18
                },
                // 响应处理函数
                success: function(data) {
                    console.log(data);
                }
            })
        }
    </script>
</body>

2. 使用 CORS 的方式：

跨越资源共享CORS，它运行浏览器向跨源服务器发出 XMLHttpRequest 或 Fetch 请求。目前浏览器都支持这个功能，只需要服务器设置 Access-Control-Allow-Origin 就可以开启CORS。

app.use(async (ctx, next) => {
  ctx.set('Access-Control-Allow-Origin', '*')
  ctx.set('Access-Control-Allow-Headers','Content-Type,Content-Length,Authorization,Accept,X-Requested-With')
  ctx.set('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  if (ctx.method === 'OPTIONS') {
      ctx.body = 200;
  } else {
      await next()
  }
});

3. 使用 Node

同源策略是浏览器需要遵循的标准，如果是服务器向服务器请求就无需遵循同源策略。所以可以使用Node中间件代码（两次跨域）：

接受客户端请求 → 将请求转发给服务器 → 拿到服务器响应数据 → 将响应转发给客户端

4. 使用代理服务器

有跨域的请求操作时发送请求给后端，让后端代为请求，然后最后将获取的结果返回。因为服务器没有跨域接口限制。