[RUBY] [Nuxt x Rails] Paramètres du proxy en raison d'une erreur CORS

Lorsque j'envoie un formulaire d'informations utilisateur à Rails depuis la face avant, j'obtiens cette erreur.

Access to XMLHttpRequest at 'http://localhost:3000' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Habituellement, le recto et le verso ont le même domaine, mais ils peuvent être différents. Dans un tel cas, l'erreur «Ne pas autoriser la communication interdomaine» se produit.

Par conséquent, il est nécessaire d'éliminer l'erreur CORS en définissant les paramètres de proxy du côté Nuxt et du côté Rails.

Pour À propos de CORS, veuillez vous référer au lien.

Configurer un proxy frontal

Le serveur local à l'arrière est http: // localhost: 3000.

$ yarn add @nuxtjs/proxy

nuxt.config.js

  modules: [
    '@nuxtjs/proxy',
  ],
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: {
        '^/api': '/api'
      }
    },
  },

Définir CORS backend

Le serveur local sur la face avant est http: // localhost: 8080.

Gemfile

gem 'rack-cors'

$ bundle install

config/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    #Domaines autorisés
    origins 'localhost:8080'
    #En-têtes et méthodes autorisés
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Edition supplémentaire: lors de la gestion des sessions côté serveur

config/application.rb

config.api_only = false

Si vous utilisez le mode API, c'est vrai, alors vérifiez-le