无法让 rails/angular CORS 工作

Posted 2023-03-04

【中文标题】无法让 rails/angular CORS 工作

【英文标题】：can't get rails/angular CORS to work

【发布时间】：2015-06-16 04:13:22

【问题描述】：

我编写了一个 Angular 应用程序，它是 Rails 应用程序的一部分。这个想法是第三方网站可以在他们的页面中创建一个脚本标签，指向他们希望我的应用程序出现的我的 rails 方法。

在我的 Rails 控制器中，我有返回原始 javascript 的逻辑，如下所示...

def job_board
    div_init_script =
          "var jobBoardDiv=document.getElementById('#div_id');" \
          "jobBoardNgView=document.createElement('ng-view');" \
          'jobBoardDiv.appendChild(jobBoardNgView);' \
          "jobBoardDiv.setAttribute('ng-app','jobBoard');"

    url = Rails.application.config.api_url

    contents = Rails.cache.fetch 'api_js' do
      file_contents = File.read("#Rails.root/public/app/app.js")
      "(function() var hookApiUrl =   apiUrl: '#url';#file_contents)();"
    end

    send_data div_init_script + contents, type: 'text/javascript', disposition: 'inline'
end

因此，回顾一下，我的网站返回在另一个网站内执行的原始 javascript，并且我的 javascript 获取/发布到我网站的 api 端点。

我发现这个要点是为了让 CORS 工作 - https://gist.github.com/dhoelzgen/cd7126b8652229d32eb4 - 当我在 Rails 服务器中本地运行它时，所有的标头都被添加到每个请求中。

但是，当我设置在本地主机上运行页面的场景时，CORS 将不起作用，该页面的脚本 src 设置为我网站的 job_board 端点。根据我的阅读，Angular 向 $http.get 和 post 方法添加了预检检查，上面链接的 gist 中的代码的预检部分“应该”处理。但是当我在运行我的应用程序时查看控制台时，我没有看到任何对失败调用的预检检查。只需一个没有添加访问控制标头的调用。我不确定现在还能去哪里。任何人都可以提出任何建议吗？谢谢。

【问题讨论】：

Angular 没有进行飞行前检查。如果你使用 Fiddler，你会看到一个 OPTIONS 调用——你的服务器需要正确处理这个

也许这里的一些答案会有一些用处：***.com/questions/24134117/…

我想我离问题越来越近了，但还没有那么多解决方案。进行初始脚本调用时，它会将 cookie 保存到客户端。 Angular 有 $httpProvider.defaults.withCredentials = true;处理请求中的 cookie。但是，如果凭据为真，我的来源就不能是“*”。

【参考方案1】：

如果是预检检查，它应该尝试运行“OPTIONS”方法。这是 chrome 调试器告诉你的吗？

使用 chrome 调试器网络选项卡，查看 REQUEST 和 RESPONSE 标头。这应该让您更好地了解正在发生/失败的事情。

编辑 您的服务器没有响应正确的 CORS 标头。

至少，您需要您的服务器在您的标头中响应“Access-Control-Allow-Origin”和“Access-Control-Allow-Methods”。例如：

"Access-Control-Allow-Origin" value="http://yourclienturi.com"
"Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, HEAD, OPTIONS"
"Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept"

【讨论】：

不，我没有看到 chrome 调试器中使用了任何 OPTIONS 方法。这是我看到的截图 - i.imgur.com/TonzUiK.jpg

添加一些可能对您有帮助的信息

是的，这就是我的全部问题。我试图找出原因。它应该在所有操作上添加这些标题，并且当我在本地运行它时会这样做。但是在我们的开发服务器上，它只添加了一些。所以我不确定为什么当我引用我们的开发服务器时它们不在那里。