[RUBY] [Nuxt x Rails] Proxy-Einstellungen aufgrund eines CORS-Fehlers

Wenn ich von vorne eine Form von Benutzerinformationen an Rails sende, wird dieser Fehler angezeigt.

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.

Normalerweise haben Vorder- und Rückseite dieselbe Domäne, sie können jedoch unterschiedlich sein. Zu diesem Zeitpunkt tritt der Fehler "Domänenübergreifende Kommunikation nicht zulassen" auf.

Daher muss der CORS-Fehler behoben werden, indem die Proxy-Einstellungen sowohl auf der Nuxt-Seite als auch auf der Rails-Seite festgelegt werden.

Informationen zu About CORS finden Sie unter dem Link.

Richten Sie den Front-End-Proxy ein

Der lokale Server auf der Rückseite ist "http: // localhost: 3000".

$ yarn add @nuxtjs/proxy

nuxt.config.js

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

Backend CORS einstellen

Der lokale Server auf der Vorderseite ist "http: // localhost: 8080".

Gemfile

gem 'rack-cors'

$ bundle install

config/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    #Zulässige Domains
    origins 'localhost:8080'
    #Zulässige Header und Methoden
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Extra Edition: Beim Verwalten von Sitzungen auf der Serverseite

config/application.rb

config.api_only = false

Wenn Sie den API-Modus verwenden, ist dies der Fall. Überprüfen Sie ihn daher