[英]**No 'Access-Control-Allow-Origin' header is present on the requested resource.**
[英]No 'Access-Control-Allow-Origin' header is present on the requested resource. [Django-React Setup]
嘗試通過React調用Django API。 但是CORS似乎無法正常工作。
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,
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
在React Server上運行Dashboard的控制台
無法加載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:無法獲取
編輯:來自瀏覽器的響應集( 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"
]
}
解決方法:
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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.