Прокси не работает в Rails 5 API / проекте React - PullRequest
Новая
       58

Прокси не работает в Rails 5 API / проекте React

1 голос
/ 01 июня 2019

Я следую этому руководству по созданию API-интерфейса Rails 5 с внешним интерфейсом React с использованием приложения Create React. Почти сразу я столкнулся с проблемой, связанной с работой прокси, и после прочтения каждого ответа на эту проблему я все еще не могу избавиться от ошибки CORS.

Итак, руководство должно быть написано до выпуска CRA2, так как предлагает добавить следующее к вашему package.json: 

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

Если я это сделаю, я получаю следующую ошибку при попытке запустить 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.

Это привело меня к этому вопросу , который по существу рекомендует установить http-proxy-middleware, удалить запись прокси из package.json и добавить следующее в новый файл с именем setupProxy.js: 

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

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

В моем случае вместо этого я использовал порт 3001, как показано в руководстве.

Этот совет повторяется как в React документах , так и в их v2 выпуске Github .

Они также говорят, что если вам не требуется расширенная настройка, вы можете просто использовать прокси-запись в package.json и просто использовать строку, а не объект.

Во всяком случае, я пробовал все варианты этого безрезультатно. Я использую axios, чтобы сделать запрос, вот весь компонент: 

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;

Независимо от того, что я делаю, я всегда получаю одну и ту же ошибку: 

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.

Я предполагаю, что мог бы использовать rack-cors, чтобы разрешить CORS, но, насколько я понимаю, прокси-сервер должен сделать это ненужным.

Я что-то упускаю из виду супер очевидное?

...