javascript 由于CORS策略，从ReactJS到flask API的获取请求被拒绝

jaxagkaj 于 2023-05-05 发布在 Java

关注(0)|答案(3)|浏览(196)

我试图从我的前端（ReactJS项目）拉取请求到我的flask API端点。但每当我尝试这样做时，这个奇怪的错误就会出现

Access to fetch at 'https://2483-103-79-250-41.ngrok-free.app/check' (redirected from 'http://2483-103-79-250-41.ngrok-free.app/check') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我也在API中指定了我的源（当前源-〉http：//localhost：3000）下面是我的flask api代码

from flask import Flask, request
import utils
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins="http://localhost:3000")

@app.route("/create_user", methods=["POST"])
def sign_up():
    body = request.get_json()
    res = utils.sign_up_user(
        user_name=body['user_name'],
        user_password= body['user_password'],
        user_email= body['user_email']
    )
    return res

@app.route("/login_user", methods=["POST"])
def log_in():
    body = request.get_json()
    res = utils.log_in_user(
        user_name=body['user_name'],
        user_password=body['user_password'],
        user_email=body['user_email']
    )
    return res

@app.route("/check", methods=["GET"])
def check():
    return {
        "status":"ok"
    }

if __name__=="__main__":
    app.run(debug=True)

下面是我尝试执行fetch请求的函数

const checkApi = async (fetchUri) => {
        try {
            let uri = `${fetchUri}/check`
            const rawRes = await fetch(uri)
            const res = await rawRes.json()
            if (res.status == "ok") {
                localStorage.setItem("@uri", String(fetchUri))
                setUri(fetchUri)
                if(user.exists){
                    navigate("/app")
                }else{
                    navigate("/login")
                }
                return
            }
            clearBadUri()
        } catch (error) {
            clearBadUri()
        }
    }

我尝试使用函数来执行一个fetch请求，以检查API是否正常工作。但是无论我做什么类型的请求，它都会给我CORS错误，我甚至将CORS源设置为我当前的react源。我想知道如何避免这种错误以及它意味着什么。

JavaScript

来源：https://stackoverflow.com/questions/76174171/fetch-request-from-reactjs-to-flask-api-being-rejected-due-to-cors-policy

3条答案

按热度按时间

gopyfrb31#

要解决此错误，您需要在服务器上允许跨域请求。在你的Flask代码中，你已经在使用Flask-CORS扩展来允许来自“http：//localhost：3000”的请求。但是，您可能需要指定CORS请求所允许的HTTP方法。修改

from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins="http://localhost:3000", supports_credentials=True, methods=['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'])

supports_credentials=True参数用于允许跨域请求发送cookie。

赞(0）回复(0）举报 2023-05-05

7rtdyuoh2#

浏览器中的URL是什么？如果是https://2483-103-79-250-41.ngrok-free.app：
而不是CORS(app, origins="http://localhost:3000")你必须把

CORS(app, origins="https://2483-103-79-250-41.ngrok-free.app")

赞(0）回复(0）举报 2023-05-05

1wnzp6jl3#

我的设置-〉我有一个react js项目作为我的前端托管在我的电脑上。然后我有一个flask服务器在我的电脑上运行，但是使用ngrok进行端口转发，我试图使用ngrok在react js项目中给我的uri来访问我的flask服务器。
我的问题-〉发生了一个名为“CORS不允许请求”的错误，这是因为服务器没有正确配置允许CORS，我想？我不是这方面的Maven，但在经过了很多令人头痛的聊天之后，GPT给了我一个对我有效的答案。

from flask import Flask, request
import utils
from flask_cors import CORS, cross_origin

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "http://localhost:3000"}}) #Add your url of project here

@app.route("/create_user", methods=["POST"])
@cross_origin() #add this before every endpoint
def sign_up():
    body = request.get_json()
    res = utils.sign_up_user(
        user_name=body['user_name'],
        user_password= body['user_password'],
        user_email= body['user_email']
    )
    return res

@app.route("/login_user", methods=["POST"])
@cross_origin()
def log_in():
    body = request.get_json()
    res = utils.log_in_user(
        user_name=body['user_name'],
        user_password=body['user_password'],
        user_email=body['user_email']
    )
    return res

@app.route("/check", methods=["GET"])
@cross_origin()
def check():
    return {
        "status":"ok"
    }

if __name__=="__main__":
    app.run(debug=True)

这对我很有效，希望对其他人也有帮助。

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 由于CORS策略，从ReactJS到flask API的获取请求被拒绝

3条答案

相关问题

热门标签

最新问答