GET API 在瀏覽器中顯示 KeyError，但在 Postman 中工作

Question

我遇到了一個奇怪的問題，我創建的 GET API 在 Postman 中工作正常，但在瀏覽器中輸入時無法在該特定 URL 上工作。

以下是 Postman 中成功顯示的輸入和輸出的外觀：在 Postman 中嘗試 API

這是我的瀏覽器上顯示的錯誤：瀏覽器中的錯誤

我也在 React 中收到關於 CORS 標頭的錯誤，即使我已經添加了代碼來嘗試處理該問題： React 關於 CORS 的錯誤

• 這是Django中settings.py中的代碼：

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'Prediction',
        'rest_framework',
        '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',
    ]

• 這是 Django 中 local_settings.py 中的代碼：

    #########################################
        ##  IMPORT LOCAL SETTINGS ##
    #########################################
    
    try:
        from .local_settings import *
    except ImportError:
        pass
    
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.postgresql_psycopg2',
            'NAME': 'postgres',
            'USER': 'postgres',
            'PASSWORD': 'postgres',
            'HOST': '127.0.0.1',
            'PORT': '5432',
        }
    }
    
    #################################################################
        ##  (CORS) Cross-Origin Resource Sharing Settings ##
    #################################################################
    CORS_ORIGIN_ALLOW_ALL = True

• 我還嘗試在 React 的 index.js 中添加此代碼來處理 CORS 標頭問題，但它不起作用：

    const express = require('express');
    const request = require('request');
    
    const app = express();
    
    app.use((req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*');
        next();
    });
    
    app.get('/jokes/random', (req, res) => {
        request({
                url: 'https://joke-api-strict-cors.appspot.com/jokes/random'
            },
        (error, response, body) => {
            if (error || response.statusCode !== 200) {
                return res.status(500).json({
                    type: 'error',
                    message: err.message
                });
            }
    
            res.json(JSON.parse(body));
        }
    )
    });
    
    const PORT = process.env.PORT || 3000;
    app.listen(PORT, () => console.log(`listening on ${PORT}`));

這是 React 中 App.js 中的代碼：

    import logo from './logo.svg';
    import './App.css';
    import { useState } from 'react';
    import axios from 'axios';
    
    function App() {
        const [json_response1, set_json_response1] = useState("1st algorithm - List of similar events");
    
        function request_json_response() {
            axios.get('http://127.0.0.1:8000/api/get_events_1st_alg', {
                    data: {
                        "ID": "User_ID1"
                    }
                }).then(function (response) {
                    // handle success
                    set_json_response1(response);
                });
        }
    
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                        <p>
                            {json_response1}
                        </p>
    
                    <button onClick={request_json_response}>
                        Generate events for user
                    </button>
    
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
                    </a>
            </header>
        </div>
    );
    }
    
    export default App;

這是Django中views.py中的代碼：

    class get_events_1st_alg(APIView):
        def get(self, request, format=None):
            """
            data = request.data
            banana_dictionary = {'banana':17}
            return Response(banana_dictionary, status=status.HTTP_201_CREATED)
            """
            import pandas as pd
            import numpy as np
            import psycopg2
            import sqlalchemy
            from sklearn.metrics.pairwise import cosine_similarity
            from sklearn.metrics import pairwise_distances
            import requests
    
            from sqlalchemy import create_engine
            engine = create_engine('postgresql://postgres:postgres@localhost/postgres')
            # pd.read_sql_query('''SELECT * FROM arts_user_interaction LIMIT 5;''', engine)
            events = pd.read_sql_query('''SELECT * FROM arts_event;''', engine)
            Ratings = pd.read_sql_query('''SELECT * FROM arts_user_interaction;''', engine)
    
            Mean = Ratings.groupby(by="User_ID", as_index = False)['User Rating'].mean()
            Rating_avg = pd.merge(Ratings, Mean, on = "User_ID")
            Rating_avg['adg_rating']=Rating_avg['User Rating_x']-Rating_avg['User Rating_y']
    
            check = pd.pivot_table(Rating_avg,values='User Rating_x',index='User_ID',columns='Event_ID')
            final = pd.pivot_table(Rating_avg,values='adg_rating',index='User_ID',columns='Event_ID')
            final_event = final.fillna(final.mean(axis=0))
            final_user = final.apply(lambda row: row.fillna(row.mean()), axis=1)
    
            cosine = cosine_similarity(final_event)
            np.fill_diagonal(cosine, 0 )
            similarity_with_event =pd.DataFrame(cosine,index=final_event.index)
            similarity_with_event.columns=final_user.index
    
            def find_n_neighbours(df,n):
                order = np.argsort(df.values, axis=1)[:, :n]
                df = df.apply(lambda x: pd.Series(x.sort_values(ascending=False)
                       .iloc[:n].index, 
                      index=['top{}'.format(i) for i in range(1, n+1)]), axis=1)
                return df
    
            sim_user_30_e = find_n_neighbours(similarity_with_event,30)
    
            def get_user_similar_events( user1, user2 ):
                common_events = Rating_avg[Rating_avg.User_ID == user1].merge(
                Rating_avg[Rating_avg.User_ID == user2],
                on = "Event_ID",
                how = "inner" )
                return common_events.merge(events, on ='Event_ID')
    
            a = get_user_similar_events('User_ID10','User_ID220')
            a = a.reindex(columns= ['User Rating_x_x','User Rating_x_y','Name'])
    
            Rating_avg = Rating_avg.astype({"Event_ID": str})
            Movie_user = Rating_avg.groupby(by = 'User_ID')['Event_ID'].apply(lambda x:','.join(x))
    
            def User_item_score1(user):
                Movie_seen_by_user = check.columns[check[check.index==user].notna().any()].tolist()
                a = sim_user_30_e[sim_user_30_e.index==user].values
                b = a.squeeze().tolist()
                d = Movie_user[Movie_user.index.isin(b)]
                l = ','.join(d.values)
                Movie_seen_by_similar_users = l.split(',')
                Movies_under_consideration = list(set(Movie_seen_by_similar_users)-set(list(map(str, Movie_seen_by_user))))
                Movies_under_consideration = list(map(str, Movies_under_consideration))
                score = []
                for item in Movies_under_consideration:
                    c = final_event.loc[:,item]
                    d = c[c.index.isin(b)]
                    f = d[d.notnull()]
                    avg_user = Mean.loc[Mean['User_ID'] == user,'User Rating'].values[0]
                    index = f.index.values.squeeze().tolist()
                    corr = similarity_with_event.loc[user,index]
                    fin = pd.concat([f, corr], axis=1)
                    fin.columns = ['adg_score','correlation']
                    fin['score']=fin.apply(lambda x:x['adg_score'] * x['correlation'],axis=1)
                    nume = fin['score'].sum()
                    deno = fin['correlation'].sum()
                    final_score = avg_user + (nume/deno)
                    score.append(final_score)
                data = pd.DataFrame({'Event_ID':Movies_under_consideration,'score':score})
                top_5_recommendation = data.sort_values(by='score',ascending=False).head(5)
                Movie_Name = top_5_recommendation.merge(events, how='inner', on='Event_ID')
                Movie_Names = Movie_Name.Name.values.tolist()
                return Movie_Names
    
            # user = input("Enter the user id to whom you want to recommend : ")
            data = request.data
    
            user = ""
    
            for i, v in data.items():
                user = str(v)
    
            predicted_movies = User_item_score1(user)
    
            return Response(predicted_movies, status=status.HTTP_201_CREATED)

我真的不知道我在做什么，因為我只是在網上學習一堆教程，所以如果有人能幫助解決瀏覽器中的 API 問題和瀏覽器中 CORS 的 React 問題，我會很高興的。 非常感謝！

Answer 1

問題是 GET 請求不應該有正文（axios 未指定/支持它）。 在 axios 存儲庫中查看此問題：鏈接。

請從數據更改為參數：

axios.get('http://127.0.0.1:8000/api/get_events_1st_alg', { params: { "ID":"User_ID1"}})

並在 DRF 中訪問它，例如：

user = request.query_params.get("ID")

您的 CORS 配置沒問題。