访问被CORS标头阻止

Question

我正在与Django合作一个项目，该项目通过React前端上的Django Rest框架通过API提供数据。可浏览的API工作正常，但是，react前端在控制台中给出了一个错误。

我已成功安装django cors标头。

import './App.css';

  class App extends Component {
      state = {
        products: []
      };

      async componentDidMount() {
        try {
          const res = await fetch('http://127.0.0.1:8000/products/');
          const products = await res.json();
          this.setState({
            products
          });
        } catch (e) {
          console.log(e);
        }
      }

      render() {
        return (
          <div>
            {this.state.products.map(products => (
              <div key={products.id}>
                <h1>{products.prodName}</h1>
                <span>{products.description}</span>
              </div>
            ))}
          </div>
        );
      }
    }

    export default App;

CORS策略阻止从http://127.0.0.1:8000/products/http://localhost:3000获取数据：请求的资源上不存在访问控制允许来源标头。如果不透明的响应满足您的需求，请将请求的模式设置为no-cors，以在禁用CORS的情况下获取资源。

Answer 1

这些是要检查的参数：1。在（setting.py）中的中间件中添加此行

'corsheaders.middleware.CorsMiddleware',

CORS_ORIGIN_WHITELIST = (
   'localhost:3000/'
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

所有这些参数都在设置文件（setting.py）中

path('products/', views.products,name='products')