访问被 CORS 标头阻止

Posted 2023-02-27

【中文标题】访问被 CORS 标头阻止

【英文标题】：Access blocked by CORS headers

【发布时间】：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

【参考方案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')