所请求的资源上没有“ Access-Control-Allow-Origin”标头。 [Django反应设置] [英] No 'Access-Control-Allow-Origin' header is present on the requested resource. [Django-React Setup]

问题描述

尝试通过React调用Django API。但是CORS似乎无法正常工作。

Trying to call a Django API via React. But CORS does not seem to be working properly.

settings.py（django）

settings.py (django)

ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'oauth2_provider',
    'rest_framework',
    'accounts',
    'products',
    'corsheaders',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'oauth2_provider.middleware.OAuth2TokenMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True

Chrome浏览器中的API

API in chrome browser,

GET /products/view/
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

[
    {
        "id": 5,
        "name": "product_updated",
        "image": "...",
        "cost": "50.00",
        "avail_quantity": 100,
        "desc": "Good",
        "rating": "3.60",
        "users_rated": 100
    },
    {
        "id": 14,
        "name": "Dark Coffee",
        "image": "...",
        "cost": "50.00",
        "avail_quantity": 100,
        "desc": "Good",
        "rating": "3.60",
        "users_rated": 100
    }
]

反应组件：

import React, { Component } from 'react'

class Dashboard extends Component {

  constructor(props) {
    super(props)
    this.state = {
      text: '127.0.0.1:8000',
      productList: []
    }
     this.fetchProducts = this.fetchProducts.bind(this)
  }

 fetchProducts(){
     fetch(`http://127.0.0.1:8000/products/view`, {
         method: "GET",
          }).then(res=> res.json())
            .then(res=> {
              console.log(res, typeof res, res.length)
            this.setState({productList: res})
          })
      console.log(this.state.productList)
}


 componentWillMount(){
    this.fetchProducts()
 }

render() {
  var list = []
  for (let i = this.state.productList.length-1; i >= 0; i--) {
        list.push(<li>{this.state.productList[i].name}</li>)
        console.log(list)
      }
  return (
    <div className="dashboard">

    <h1>Welcome To Bear State Coffee!</h1>
    <h3>Products: </h3>
    <ul>
      {list}
    </ul>

    </div>
  )
}
}

export default Dashboard

在反应服务器上运行仪表板的控制台

Console on running Dashboard on react server

无法加载 http://127.0.0.1:8000/products/view ：从
' http://127.0.0.1:8000/products/view '到
' http://127.0.0.1:8000/products/view/ '已被CORS
阻止策略：
请求的资源上没有 Access-Control-Allow-Origin标头。因此，不允许
起源‘ http：// localhost：3000 。如果不透明的响应满足您的需求，请将
请求的模式设置为 no-cors，以在禁用CORS的情况下获取资源。
localhost /：1未捕获（承诺）TypeError：无法获取

Failed to load http://127.0.0.1:8000/products/view: Redirect from 'http://127.0.0.1:8000/products/view' to 'http://127.0.0.1:8000/products/view/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

编辑：来自浏览器的响应集（< a href = http://127.0.0.1:8000/products/view/ rel = nofollow noreferrer> http://127.0.0.1:8000/products/view/ ）

Set of response from browser (http://127.0.0.1:8000/products/view/)

OPTIONS /products/view/
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "name": "Products",
    "description": "GET: For viewing all products",
    "renders": [
        "application/json",
        "text/html"
    ],
    "parses": [
        "application/json",
        "application/x-www-form-urlencoded",
        "multipart/form-data"
    ]
}

推荐答案

一种解决方法：

• 使用chrome扩展名允许控制-允许起源


• 使用代理：而不是访问 http://127.0.0.1 ：8000 / products / view ，使用 https://cors-anywhere.herokuapp.com/ 这样的代理作为前缀： https://cors-anywhere.herokuapp.com/http://127.0.0.1:8000/products/view

• Use the chrome extension Allow-Control-Allow-Origin
• Use proxy: instead of accessing http://127.0.0.1:8000/products/view, use a proxy like https://cors-anywhere.herokuapp.com/ as a prefix: https://cors-anywhere.herokuapp.com/http://127.0.0.1:8000/products/view

这篇关于所请求的资源上没有“ Access-Control-Allow-Origin”标头。 [Django反应设置]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！