极简修复CORS跨域问题，亲测有效

最新推荐文章于 2025-05-29 09:47:23 发布

原创

最新推荐文章于 2025-05-29 09:47:23 发布 · 7.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#CORS #JavaScript #服务器 #跨域 #Access-Control-Allow-Origin

前后端分离开发常遇到跨域问题，本文提供两种解决方案：一、安装浏览器插件，适用于开发阶段；二、构建代理服务器，通过理解CORS机制，利用如CORS-Anywhere的代理服务或自建Node.js代理，消除延迟并确保安全性。

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

原文地址：https://www.jeremyjone.com/456/ ，转载请注明。

在前后端分离开发、远程调用等过程中，总能碰到跨域问题，其报错大体长这个鸟样：

file

对于这个bug，前端同学可以使用简单的方法处理，这里推荐两个方案：

方案一，安装一个名为`Allow-Control-Allow-Origin`的插件

你没有听错，前端同学最方便的方式其实是安装一个插件，安装后，在浏览器中打开它，使图标变为绿色便可以正常使用。

Chrome爱心地址，需要梯子，自行解决。

这个很好用，但是插件只适用于开发阶段，因为产品一旦发布，不能要求用户同样安装类似插件。

方案二，构建代理服务器

在构建之前，需要了解CORS，该错误源于浏览器称为同源策略的安全机制。

那么什么是CORS？

参考文档，这是mozilla的官方描述，有兴趣的同学可以自行查看，大体是这样的：

跨源资源共享（CORS）是一种机制，它使用额外的HTTP标头告诉浏览器让在一个源（域）上运行的Web应用程序有权从不同来源的服务器访问所选资源。Web应用程序在请求具有与其自己的源不同的源（域，协议或端口）的资源时执行跨源HTTP请求。

file

针对ASP.NET的处理方案，参考这里，自行查看。

使用代理

这里推荐一个网址：https://cors-anywhere.herokuapp.com/ ，这是一个专门的跨域请求网址，直接打开该网址，可以看到描述如下：

此API可以向任何地方启用跨源请求。

用法：

/显示帮助
/ iscorsneeded这是此主机上唯一没有CORS头的服务器。
/ <url>创建对<url>的请求，并在响应中包含CORS头。

如果省略该协议，则默认为http（如果指定了端口443，则为https）。

Cookie被禁用并从请求中删除。

自动遵循