Question

我遵循this tutorial，使用Create React App使用React前端构建Rails 5 API。几乎立即，我遇到了使代理正常工作的问题，并且在阅读了对此问题的所有回复后，仍然无法摆脱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.

这导致我进入this question，它实际上建议安装http-proxy-middleware，从package.json删除代理条目，并将以下内容添加到名为setupProxy.js的新文件中： / p>

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

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

在本例中，按照教程，我改用端口3001。

React docs及其v2 Github issue中都重复了此建议。

他们还说，如果您不需要高级设置，则可以只使用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，但是我的理解是代理应该使它不必要。

我是否缺少某些明显的东西？

代理在Rails 5 API / React项目中不起作用

0 个答案: