reactjs Post请求可以使用python,但不能使用javascript/react

vh0rcniy  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(157)

我使用python、AWS Lambda和API Gateway为发布请求设置了一个API端点。我使用python测试了API端点,一切正常。我使用javascript测试了同一个端点,它不工作。
下面是我运行的python脚本,它工作正常。

import json
import requests

if __name__ == '__main__':
    
    # Data that is posted to API
    data = {"var1" : "x",
            "var2" : 500,
            "var3" : [{"name": "Bob", "age": 22}]}
    
    # Convert dict to json
    data = json.dumps(data) 

    # API endpoint
    url = "https://api.example.com/endpont"

    # POST request
    response = requests.post(url, json=data)

    data = response.text

现在我正在尝试在一个带有Axios的React应用程序中使用API端点。我还在使用Heroku代理服务器。

function postData() {

    let data = JSON.stringify({
      var1:"x",
      var2:500,
      var3:[{"name": "Bob", "age": 22}]
    })
    const resp = axios.post("https://example.herokuapp.com/https://api.example.com/endpont", data)
  }

当我运行axios post请求时,它不工作,并给我以下错误信息:

Uncaught in promise - Request failed with status code 502 - ERR_BAD_RESPONSE - Bad Gateway

你知道是什么原因导致它可以在python上运行而不能在javascript上运行吗?
我尝试检查Heroku代理服务器日志中的错误,一切正常。我检查了AWS Cloud Watch日志中的Lambda函数,但javascript post请求甚至没有触发日志条目。当我使用python运行post请求时,出现了Cloud Watch日志条目,并显示工作正常。

bxfogqkk

bxfogqkk1#

代理服务器和服务器端的CORS可能存在问题。测试运行的位置(例如:与服务器相同的主机),将改变CORS限制对每个测试的影响。HTTP 502响应可能意味着CORS是根本问题。

  • HTTP响应502 Bad Gateway服务器错误响应代码指示服务器在充当网关或代理时从上游服务器收到无效响应。
  • 尝试使用cURLwGet从多个环境(如开发系统或不同的服务器)进行测试。
  • 尝试调试从Heroku代理服务器到AWS Lambda的连接。
  • 参见:How to enable CORS in python
dJango

在Django设置中配置中间件的行为。您必须至少设置以下设置之一:

CORS_ALLOW_ALL_ORIGINS

如果为True,则允许所有来源。将忽略限制允许来源的其他设置。默认值为False。将此值设置为True可能很危险,因为它允许任何网站向您的网站发出跨来源请求。通常,您希望使用CORS_ALLOWED_ORIGINSCORS_ALLOWED_ORIGIN_REGEXES限制允许来源的列表。

授权进行跨站点HTTP请求的来源列表。此设置中的来源将被允许,并且请求来源将在Access-Control-Allow-Origin标头中回显到客户端。

CORS_ALLOWED_ORIGINS = [
   "https://example.com",
   "https://sub.example.com",
   "http://localhost:8080",
   "http://127.0.0.1:9000",
]
Flask

简单用法
在最简单的情况下,使用默认参数初始化Flask-Cors扩展,以便允许所有路由上的所有域使用CORS。请参阅文档中的完整选项列表。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

特定于资源的CORS
或者,您可以通过将字典作为resources选项传递,将路径Map到一组选项,在资源和原始粒度级别上指定CORS选项。请参阅文档中的完整选项列表。

app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route("/api/v1/users")
def list_users():
  return "user example"

通过装饰器路由特定的CORS
这个扩展还公开了一个简单的装饰器来装饰flask路径。只需在对Flask的@app.route(..)的调用下面添加@cross_origin(),就可以在给定的路径上允许CORS。请参阅装饰器文档中的完整选项列表。

@app.route("/")
@cross_origin()
def helloWorld():
  return "Hello, cross-origin-world!"

相关问题