

ruby on railsの勉強中で、知識も乏しく拙い文章ですが、どなたか教えていただけると嬉しいです。  
宜しくお願いいたします。

### 状況

すでに公開しているウェブサイトにお問い合わせフォームを導入しようとしています。  
フロント側はhtml、javascript、apacheを、使っています。  
バックエンドはapiモードでrailsを使って、メールの送信を行いたいと思っています。  
【問題】  
railsの"rack-cors"というgemをインストールしてCORSの設定をしましたが、  
以下の写真のようにエラーが出ています。  
chromeでは通信ができておらず、firefoxでテストした場合は  
通信は出来ていますが、エラーが出ています。  
解決方法をご存じの方がいらっしゃいましたらご教授お願い致します。  
↓chromeのエラー  
[![chrome](https://i.stack.imgur.com/P1iwz.png)](https://i.stack.imgur.com/P1iwz.png)  
↓firefoxのエラー  
[![firefox](https://i.stack.imgur.com/pTKBi.png)](https://i.stack.imgur.com/pTKBi.png)

【cors.rb】

[code]

    Rails.application.config.middleware.insert_before 0, Rack::Cors do
      allow do
       origins "*"
    
        resource "*",
          headers: :any,
          methods: [:get, :post, :put, :patch, :delete, :options, :head]
      end
    end
    
[/code]

【routes.rb】

[code]

    Rails.application.routes.draw do
      get "contact/test"
    end
    
[/code]

[code]

    const onClickSubmitBtnTest = () => {
        const submit_btn = document.getElementById('btn_submit_test');
            var request = new XMLHttpRequest();
            request.open('GET', "http://127.0.0.1:3000/contact/test", true);
    
            // // レスポンスが返ってきた時の処理を記述
            // request.onload = function () {
            // // レスポンスが返ってきた時の処理
            // }
            
            // リクエストをURLに送信
            request.send();
    }
[/code]

[code]

    <button id="btn_submit_test" class="btn btn_submit" onclick={onClickSubmitBtnTest()}>テスト<i class=""></i></button>
[/code]


CC BY-SA 4.0
2022-03-28T08:06:47.257
88070
2022-03-28T19:40:55.170
2022-03-28T09:21:12.443
47710
47710
question
javascript ruby-on-rails ruby apache cors
Ruby on Railsのapiモードでクロスオリジンの通信がしたい


`Rails.application.config.hosts <<
"example.com"`のような記述を`config/application.rb`などに追加してみてください。"example.com"の部分はフロントエンドが動作しているドメインになります。

<https://github.com/cyu/rack-cors#rails-configuration>  
こちらに記述されている内容です。

もしそれで動かなければ、`cors.rb`のファイルの置き場所が間違っているのかもしれません。`config/initializers`配下であれば読み込まれてはいるはずです。


CC BY-SA 4.0
2022-03-28T19:40:55.170
88077
2022-03-28T19:40:55.170
442
88070
answer