2

I am following this tutorial on building a Rails 5 API with a React front end using the Create React App. Almost immediately I ran into an issue getting the proxy working and after reading every response to this issue I still can't get rid of the CORS error.

So the tutorial must have been written before CRA2 was released as it suggests adding the following to your package.json:

"proxy": {
  "/api": {
    "target": "http://localhost:3001"
  }
},

If I do then I get the following error when attempting to run npm start:

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.

This led me to this question, which essentially recommends installing http-proxy-middleware, removing the proxy entry from package.json, and adding the following to a new file called setupProxy.js:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

In my case I used the port 3001 instead, as per the tutorial.

This advice is repeated both in the React docs and in their v2 Github issue.

They also say that if you don't require advanced setup then you can just use a proxy entry in package.json and just use a string rather than an object.

Anyway, I've tried every variation of this to no avail. I'm using axios to make the request, here is the whole component:

import React, { Component } from 'react';
import axios from 'axios';

class ListsContainer extends Component {
    constructor(props){
        super(props)
        this.state = {
            lists: []
        }
    }
    componentDidMount() {
        axios.get('http://localhost:3001/api/v1/lists.json')
        .then(response => {
            console.log(response)
            this.setState({
                lists: response.data
            })
        })
        .catch(error => console.log(error))
    }
    render() {
        return (
            <div className="Lists-container">
                Lists
            </div>
        )
    }
}
export default ListsContainer;

No matter what I do I always get the same error:

Access to XMLHttpRequest at 'http://localhost:3001/api/v1/lists.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I assume I could use rack-cors to allow CORS but my understanding is that proxy is supposed to make it unnecessary.

Am I missing something super obvious?

Danny Santos
  • 1,090
  • 2
  • 10
  • 30

0 Answers0