离子视图 - 对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】离子视图 - 对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头

【英文标题】：Ionic view - Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header

【发布时间】：2018-09-16 22:15:32

【问题描述】：

我之前看到有人问过这个问题，但答案对我没有帮助。

我有一个使用我自己构建的 Rails 5.2 api 的 ionic 移动应用程序。 我无法通过 PUT 请求。 我遇到了这个错误。

Failed to load https://votingapi.herokuapp.com/api/v1/something: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

我已经向 API 发出了 GET 请求，没有任何问题。 通过启用 chrome 的 Allow-Control-Allow-Origin: * 插件，设法解决了 ionic serve --lab 中的问题，但问题仍然存在于 Ionic 视图中。

有什么想法吗？

宝石文件

gem 'rack-cors', require: 'rack/cors'

应用程序.rb

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*',
                 headers: :any,
                 methods: %w[:get :post :put :delete],
                 expose: %w[access-token expiry token-type uid client],
                 max_age: 0
      end

对离子的请求

update(id, result)
    let headers = new Headers();
    let body = JSON.stringify(vote: result)
    headers.append("Accept" , 'application/json');
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions( headers: headers );
    return this.http.put(`$this.apiUrl/$id`, body, options)
  

【参考方案1】：

预检请求是一个 http 选项请求 iirc。所以你必须将它添加到方法中。试试这个

methods: %w[:get :post :put :options :delete],

【讨论】：

感谢您的回答！不幸的是，它对我没有用。

【参考方案2】：

已解决

所以我们找到了解决这个问题的办法。

这是我们所做的更改：

%w[:get :post :put :delete :options] => %i[get post put delete options]

结帐：https://ionicframework.com/docs/wkwebview

他们在 ionic 框架上的某个时候切换到了这个，它在那里的某个地方说，与之前的相比，这会强制执行正确的 CORS 设置。因此，如果后端没有适当地设置 cors 规则，它将无法工作 现在。

我们需要一个用于该配置的符号数组，而我们所拥有的是生成一个字符串数组

%w[:get :post :put :delete :options] returns [":get", ":post", ":put", ":delete", ":options"]

和

%i[get post put delete options] returns [:get, :post, :put, :delete, :options]

希望这可以有人:)