访问被 CORS 标头阻止答案

【问题标题】：Access blocked by CORS headers访问被 CORS 标头阻止
【发布时间】：2019-10-04 15:57:29
【问题描述】：

我正在使用 Django 开发一个项目，该项目通过 API 通过 React 前端上的 Django Rest Framework 提供数据。 Browsable API 工作正常，但是，react 前端在控制台中出现错误。

我已经成功安装了 django-cors-headers。

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://localhost:3000”获取“http://127.0.0.1:8000/products/”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

【问题讨论】：

你已经在INSTALLED_APPS添加了它并添加了CorsMiddleware?
我已经分别添加了它们
cros 也必须从 api 端允许
@BillySomers 看看Trying to use fetch and pass in mode: no-cors

标签： django reactjs

【解决方案1】：

这些是要检查的参数： 1.在MIDDLEWARE中添加这一行(setting.py)

'corsheaders.middleware.CorsMiddleware',

确保你有这个：

CORS_ORIGIN_WHITELIST = (
   'localhost:3000/'
)

也检查一下：

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

您的设置文件 (setting.py) 中的所有这些参数

你写 fetch('http://127.0.0.1:8000/products/') 所以在你的 url.py 中确保反斜杠：

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

【讨论】：