使用Rails，我应该如何配置我的application.rb，以便允许CORS请求发生？

Question

我正在使用Rails作为后端API来支持使用VueJS制作的前端。我想在网站上的按钮被按下时，从VueJS发送一个POST请求，我已经使用axios来实现这个功能`。

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:3000signup。'从源头开始'http:/localhost:8080'已被CORS策略阻止。Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.请求头字段内容类型不被允许。

我的'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`

我想问题就出在这个文件上 但我不知道该如何配置它 谢谢您的帮助。

Answer 1

在我看来，你好像缺少该请求的主机（在你的Vue应用上）。请注意，错误的内容是 0/signup 这表明它正在将请求发送到 http://0/signup 即反过来 "拒绝 "这个连接。

我不熟悉Vue.js的结构，但我建议将axios调用封装在一个插件上，该插件将使用 "拒绝 "连接。host 环境配置文件中的主机，这样你就可以在本地主机和生产环境中使用不同的主机。甚至可以直接将主机添加到你的环境中。

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.orgguidemode-and-env.html#environment-variables。

如果你想用现在的方式来解决这个问题，只需在axios调用中加入你的主机即可。

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错误，请看这个。https:/stackoverflow.coma25727411715444