Как исправить ошибки «Access-Control-Allow-Origin» при загрузке из Rails API - PullRequest
Новая
       19

Как исправить ошибки «Access-Control-Allow-Origin» при загрузке из Rails API

0 голосов
/ 03 февраля 2019

Я пытаюсь зарегистрироваться в своем Rails API, используя Reactjs в качестве внешнего интерфейса, но я получаю эту ошибку: «Access-Control-Allow-Origin».Я включил CORS на рельсах.

Забавно, что оно работало вчера после того, как я включил надстройку на Chrome, но не у всех будет возможность узнать, что они должны добавить надстройку.Вот точная ошибка, которую я получаю: 

 Access to fetch at 'http://localhost:3001/api/v1/auth' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

, а вот мой код: 

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000/'
    resource '*',
     headers: :any,
     methods: %w(:get, :put, :post, :delete),
     expose: %w(access-token expiry token-type uid client),
     max_age: 0
   end
end

И по реакции: 

import React, { Component } from 'react'
import 'whatwg-fetch';



class SignUp extends Component {
    constructor(props) {
     super(props);
     this.state = {
       firstname: '', lastname: '', username: '', email: '', password: '', confirmpassword: ''
     };

     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }

   validateForm() {
      return (
        this.state.password.length > 8 &&
        this.state.password === this.state.confirmpassword
      );
    }


   handleChange(event) {
     this.setState({ [event.target.name]: event.target.value });
   }

   handleSubmit(event) {
     event.preventDefault();
     let data = {
         'first_name': this.state.firstname, 'last_name': this.state.lastname, 'email': this.state.email,
         'nickname': this.state.username, 'password': this.state.password, 'password_confirmation': this.state.confirmpassword,
        }
  console.log(data)
      fetch('http://localhost:3001/api/v1/auth', {
        credentials: 'same-origin',
        method: 'POST',
        headers: {
          'Accept': 'application/json, */*',
          "Content-Type": "application/json",
          'Access-Control-Allow-Origin': '*'
       },
        body: JSON.stringify(data)})
        .then(function(data) {
        console.log('request succeeded with JSON response', data)
      }).catch(function(error) {
        console.log('request failed', error)
      })
   }

   render() {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
           First Name:
            <input type="text" name='firstname' onChange={this.handleChange} />
         </label>
         <br />
         <br />

         <label>
           Last Name:
           <input type="text" name='lastname' onChange={this.handleChange} />
         </label>
         <br />
         <br />

         <label>
           Username:
           <input type="text" name='username' onChange={this.handleChange} />
         </label>
         <br />
         <br />

         <label>
           Email:
           <input type="text" name='email' onChange={this.handleChange} />
         </label>
         <br />
         <br />

         <label>
           Password:
           <input type="text" name='password' onChange={this.handleChange} />
         </label>
         <br />
         <br />

         <label>
           Confirm Password:
           <input type="text" name='confirmpassword' onChange={this.handleChange} />
         </label>
         <br />
         <br />

         <input type="submit" value="Submit" />
       </form>
     );
   }
  }

  export default SignUp

Я пытаюсьЗарегистрируйтесь, а затем сможете создавать, показывать, просматривать и удалять сообщения.Может кто-нибудь, пожалуйста, помогите мне определить проблему?Также как перенаправить пользователя после регистрации на другой странице.Любое понимание будет оценено ![enter image description here] 1

1 Ответ

0 голосов
/ 03 февраля 2019

попытаться перезагрузить кеш после включения CORS с расширением?

...