मेरे पास एक django api (djangorestframekwork, django2.1, python 3.6) है जिसे मैं स्थानीय रूप से चलाता हूं - http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad। ऐसा लगता है कि यह एपीआई अच्छी तरह से काम करता है। मैं इसे वेब एपीआई के माध्यम से हिट कर सकता हूं या डेटाबेस में जोड़ने या देखने के लिए कर्ल/अनुरोधों का उपयोग कर सकता हूं।

अब, मैं अपने रिएक्ट प्रोजेक्ट को इस एपीआई को हिट करने में सक्षम होना चाहता हूं। मैं अपनी प्रतिक्रिया परियोजना को एक अलग एपीआई हिट कर सकता हूं और यह डेटा लौटाता है, लेकिन जब मैं उस यूआरआई को अपने यूआरआई से बदलता हूं तो यह टूट जाता है।

App.js - टिप्पणी की गई एक पंक्ति है। सार्वजनिक और निजी एपीआई के बीच स्विच करने के लिए इसे दूसरे के साथ स्विच करें।

import React from 'react'
import keyforge from '../api/keyforge'
import localhost from '../api/localhost'
import SearchBar from './SearchBar'

class App extends React.Component {

    onSearchSubmit = async (term) => {    
    const response = await localhost.get("api/cards/" + term)
    //const response = await keyforge.get("api/decks/" + term)
    console.log(response)
  }

  render () {
    return (<div className='ui container'>
      <SearchBar onSubmit={this.onSearchSubmit} />
    </div>)
  }
}
export default App

Keyforge.js - यह काम करता है!

import axios from 'axios'
const proxyurl = 'https://cors-anywhere.herokuapp.com/'
const url = 'https://www.keyforgegame.com/'    
export default axios.create({
  // baseURL: 'https://www.keyforgegame.com/api/decks/'
  baseURL: proxyurl + url
})

Localhost.js - यह काम नहीं करता

import axios from 'axios'

const proxyurl = 'https://cors-anywhere.herokuapp.com/'
const url = 'http://127.0.0.1:8000/'

export default axios.create({
  baseURL: proxyurl + url
})

त्रुटि संदेश:

GET https://cors-anywhere.herokuapp.com/http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad 404 (Not Found)

Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js:17)
at settle (settle.js:19)
at XMLHttpRequest.handleLoad (xhr.js:78)

मेरे कंप्यूटर पर - http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad मुझे उस विशिष्ट तत्व के लिए Django एपीआई पृष्ठ पर ले जाता है। अगर मुझे cors-anywhere url से छुटकारा मिलता है तो मुझे यह त्रुटि मिलती है -

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

मेरे पास यह cors-anywhere यूआरएल No Access-Control-Allow-Origin त्रुटि को हल करने के लिए तैयार किया गया है जिसे आप सार्वजनिक एपीआई पर हिट करते समय देखते हैं। चूंकि मुझे वही त्रुटि मिलती है जब मैं अपनी निजी एपीआई हिट करता हूं, मैं उसी समाधान का उपयोग कर रहा हूं (उदाहरण के लिए cors-anywhere यूआरएल मेरे यूआरएल में प्रीपेन्ड किया गया है।

विचार?

0
Micah Pearce 31 पद 2018, 05:34

2 जवाब

सबसे बढ़िया उत्तर

शायद इसलिए कि आपने अपने django रेस्ट प्रोजेक्ट पर CORS सक्षम नहीं किया था। django-cors-headers नामक एक उपकरण है, इसे pip install django-cors-headers के माध्यम से स्थापित करें, इसका मिडलवेयर जोड़ें और इसे अपनी settings.py फ़ाइल में सक्षम करें।

pip install django-cors-headers

फिर इसे इंस्टॉल किए गए ऐप्स में जोड़ें:

INSTALLED_APPS = (
...
'corsheaders',
...
)

इसका मिडलवेयर जोड़ें:

MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
)

और अंत में इस चर को अपनी settings.py फ़ाइल के अंत में जोड़ें:

CORS_ORIGIN_ALLOW_ALL = True

इसके बारे में यहां और जानें: django-cors-headers on github

1
Reza Torkaman Ahmadi 31 पद 2018, 07:48

आपकी keyforge.js फ़ाइल काम करती है क्योंकि आप पहले से ही होस्ट की गई एक ऐसी वेबसाइट से टकरा रहे हैं जिसके बैकएंड पर भी CORS सक्षम है। आपको अपने Django बैकएंड पर भी CORS जोड़ने की आवश्यकता है। आपने जो कहा है, उससे ऐसा लगता है कि आपने इसे केवल सामने के छोर पर जोड़ा है। शायद ऐसा कुछ आपकी मदद कर सकता है।

मैं कैसे Django बाकी ढांचे पर CORS सक्षम कर सकते हैं?

1
Samarth Juneja 31 पद 2018, 07:28