为啥从 localhost 向 localhost 发出请求时会启动同源策略？

Posted 2023-02-27

【中文标题】为啥从 localhost 向 localhost 发出请求时会启动同源策略？

【英文标题】：Why is same origin policy kicking in when making request from localhost to localhost?为什么从 localhost 向 localhost 发出请求时会启动同源策略？

【发布时间】：2012-12-25 03:02:40

【问题描述】：

我将后端 API 作为一个单独的项目，与使用它的前端 html5 应用程序分开。我正在使用 Yeoman 进行前端开发。 Yeoman 在 localhost:3501 上运行，后端在 localhost:3000 上运行。当我从浏览器发出 API 请求时（使用 AngularJS 的 $http），我遇到了相同的来源策略：

XMLHttpRequest cannot load http://localhost:3000/venues. Origin http://localhost:3501 is not allowed by Access-Control-Allow-Origin.

AFAIK，只有在跨不同域发出请求时才应该启动同源策略。当我们从 localhost 向 localhost（尽管是不同的端口）发出请求时，为什么它会发牢骚？

我怎样才能完成这项工作，这会导致生产问题吗？

【参考方案1】：

根据W3C，“来源是由 URL 的方案、主机和端口定义的”，因此不同的端口会导致您的问题。

两种可能的解决方案：

CORS（跨域资源共享） 使用 JSONP 请求

两者都需要对您的后端进行更改（我还不够熟悉。CORS 可能意味着对您的前端的更改最少（我认为 AngularJS 开箱即用地支持它）。

【参考方案2】：

端口也计入跨域请求，因此http://localhost:3000 和http://localhost:3501 是2 个不同的域（从浏览器的角度来看）。

如果您需要两个应用程序（客户端和后端）在不同的端口上运行，请考虑使用http://enable-cors.org/