0

enter image description here

I have a front-end react application in rails and I am trying to make a request to https://localhost:3000/search but it is giving me the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:300/search

Subsequently, I tried to disable by following the answers on Allow CORS in Ruby on Rails but nothing is working.

PortfolioContainer.rb:

import React, { Component } from 'react'
import Search from "./Search";
import Calculate from "./Calculate";
import axios from 'axios'

class PortfolioContainer extends Component {
constructor(props) {
    super(props)

    this.state = {
        name: '',
        portfolio: [],
        search_results: [],
        active_currency: null,
        amount: ''
    }

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

handleChange(e) {
    // this.setState({
    //     [e.target.name]: e.target.value
    // })

    axios.post('https://localhost:300/search', {
        search: e.target.value
    })
        .then((data) => {
            debugger
        })
        .catch((data) => {
            debugger
        })
}

render() {
    return (
        <div>
            <Search handleChange={this.handleChange} />
            <Calculate />
        </div>

    )
    }
}

export default PortfolioContainer`

Initializers/Cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins '*'
  
      resource '*',
        headers: :any,
        methods: [:get, :post, :put, :patch, :delete, :options, :head]
    end
  end
Benjamin Sunderland
  • 21
  • 3

1 Answers1

1

Well that was a fun two hours,

https://localhost:300/search => https://localhost:**3000/**search

Benjamin Sunderland
  • 21
  • 3