Question

所以我要部署一个带Rails 5后端的Angular 5应用程序。我可以使数据在两个本地之间正确流动，但是尝试连接到API的已部署版本（位于Heroku上）时，遇到了一些授权问题。错误是：

Failed to load https://my_api.herokuapp.com/data.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4200' is therefore not allowed access.
The response had HTTP status code 404.

Cross-Origin Read Blocking (CORB) blocked cross-origin response <URL> with MIME type application/json. 
See <URL> for more details.

我需要在Rails API或Angular中对此进行更改吗？部署的Rails API本质上与本地版本相同，因此我不确定断开连接的来源。

在Angular中只有两次引用该API。我以与本地服务器相同的方式连接它：

Angular，app-module.ts

  providers: [Angular2TokenService, AuthService, AuthGuard,
    // {provide: 'api', useValue: 'http://localhost:3000/'}
    {provide: 'api', useValue: 'https://my_ api.herokuapp.com/data.json'}
  ]

也许这是我对Angular2TokenService的使用？

environment.ts：

export const environment = {
  production: false,
  token_auth_config: {
  // apiBase: 'http://localhost:3000'
  apiBase: 'https://my_api.herokuapp.com/data.json'
}};

谢谢！让我知道您可能有任何建议或需要澄清的建议。

Answer 1

与CORS（跨域资源共享）有关。您可以通过在API中添加回调来进行处理，如下所示：

def cors_set_access_control_headers
 headers['Access-Control-Allow-Origin'] = ENV['SERVER_URL'] || '*'
end

其中SERVER_URL是您的前端服务器URL

否则，您可以按照@Kedarnag Mukanahallipatna的评论中的建议使用gem 'rack-cors'

Angular with Rails API：“无法加载资源：服务器的响应状态为401（未经授权）”

1 个答案: