Как мне настроить свой application.rb, используя Rails, чтобы разрешить выполнение запросов CORS? - PullRequest
Новая
       84

Как мне настроить свой application.rb, используя Rails, чтобы разрешить выполнение запросов CORS?

0 голосов
/ 25 мая 2020

Я использую Rails как серверный API для поддержки внешнего интерфейса, созданного с помощью VueJS. Я хочу отправить запрос POST из VueJS при нажатии кнопки на веб-сайте, я использовал для этого ax ios
`

methods: {
    // Performs a POST request to the rails endpoint and passes the email and pass as parameters
        signup() {
          if (this.password === this.password_confirmation) {
            this.$http.plain
              .post("/signup", {
                email: this.email,
                password: this.password,
                password_confirmation: this.password_confirmation
              })
              // If successful execute signinSuccesful
              .then(response => this.signinSuccesful(response))
              // If it doesn't run for whatever reason, execute signupFailed
              .catch(error => this.signinFailed(error));
          }
      },`

Теоретически это должно создать POST запрос, который будет получен API, я попытался перехватить такой запрос: post "signup", controller: :signup, action: :create

Однако, когда я смотрю в консоль на chrome, я получаю сообщение об ошибке при первой загрузке сайта : 

`0/signin net::ERR_CONNECTION_REFUSED`

И еще одна ошибка, когда я нажимаю кнопку, чтобы отправить запрос POST: *

Доступ к XMLHttpRequest в 'http://localhost: 3000 / регистрация 'from origin' http://localhost: 8080 'было заблокировано политикой CORS: тип содержимого поля заголовка запроса не разрешен Access-Control-Allow-Headers в предполетном ответе.

Мой файл application.rb выглядит следующим образом: 

`module RecordstoreBackend
     class Application < Rails::Application
        # Initialize configuration defaults for originally generated Rails version.
        config.load_defaults 6.0
        config.api_only = true

        config.middleware.insert_before 0, Rack::Cors do
          allow do
            origins '*'
            resource '*', headers: :any, methods: [:get, :patch, :put, :delete, :post, :options]
          end
        end`

Я думаю, что проблема в этом файле, но я не уверен, как его настроить. Спасибо за помощь.

1 Ответ

0 голосов
/ 25 мая 2020

Мне кажется, что вам не хватает хоста для этого запроса (в вашем приложении Vue). Обратите внимание, что в сообщении об ошибке написано 0/signup, что означает, что он отправляет запрос на http://0/signup, что, в свою очередь, «отклоняет» соединение.

Я не знаком со структурой Vue. js , но я бы рекомендовал инкапсулировать вызов ax ios в плагин, который будет использовать host из файла конфигурации среды, чтобы вы могли иметь разные хосты для localhost и вашего производственного окружения. Или просто добавьте хост в свою среду: 

methods: {
    // Performs a POST request to the rails endpoint and passes the email and pass as parameters
        signup() {
          if (this.password === this.password_confirmation) {
            this.$http.plain
              .post(`${process.env.API_HOST}/signup`, {
                email: this.email,
                password: this.password,
                password_confirmation: this.password_confirmation
              })
              // If successful execute signinSuccesful
              .then(response => this.signinSuccesful(response))
              // If it doesn't run for whatever reason, execute signupFailed
              .catch(error => this.signinFailed(error));
          }
      },

Ссылка: https://cli.vuejs.org/guide/mode-and-env.html#environment -переменные

Если вы хотите исправить это так, как вы сейчас , просто добавьте свой хост в вызов ax ios: 

methods: {
    // Performs a POST request to the rails endpoint and passes the email and pass as parameters
        signup() {
          if (this.password === this.password_confirmation) {
            this.$http.plain
              .post("http://localhost:3000/signup", {
                email: this.email,
                password: this.password,
                password_confirmation: this.password_confirmation
              })
              // If successful execute signinSuccesful
              .then(response => this.signinSuccesful(response))
              // If it doesn't run for whatever reason, execute signupFailed
              .catch(error => this.signinFailed(error));
          }
      },

Об ошибке CORS проверьте это: { ссылка }

...