为什么React、axios和Flask会出现CORS错误?

pkln4tw6  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(404)

我知道这个问题已经问了很多次了,但是我找到的答案似乎都不管用。我的应用程序是React前端和Flask后端,通过一个api。我刚刚从通常的wait fetch切换到axios,它一直抛出CORS错误:

Access to XMLHttpRequest at 'http://127.0.0.1:5050/api/user/register' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的代码是这样的:

const config = {
    headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json" ,
    },
}

const customFetch = axios.create({
    baseURL: 'http://127.0.0.1:5050',
});

export const registerUser = createAsyncThunk(
    'user/registerUser',
    async (user, thunkAPI) => {
        try {
            const resp=await customFetch.post('/api/user/register', user, config);
            return resp.data ;
        }catch (error) {
            return thunkAPI.rejectWithValue(error.response.data.msg);

        }
    }
);

我的服务器有

CORS(app)

现在还补充道:

@app.after_request
def add_security_headers(resp):
    resp.headers['Access-Control-Allow-Origin']='*'
    resp.headers['Access-Control-Allow-Methods']='GET, POST, PUT, OPTIONS'
    resp.headers["Access-Control-Allow-Headers"]="Access-Control-Request-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Headers,Access-Control-Allow-Origin, Origin, X-Requested-With, Content-Type, Accept"
    return resp

并且在任何情况下,它对于标准工作正常:

await fetch(`${api_host}/api/user/register`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          data here ...
        }),
      });

快把我逼疯了,有线索吗?谢谢
更新
为了防止信息不足,这里提供了请求和响应头:

一般信息

Request URL: http://127.0.0.1:5050/api/user/register
Request Method: POST
Status Code: 500 
Referrer Policy: strict-origin-when-cross-origin

请求

POST /api/user/register HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 110
Content-Type: application/json
DNT: 1
Host: 127.0.0.1:5050
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.27
sec-ch-ua: "Microsoft Edge";v="105", " Not;A Brand";v="99", "Chromium";v="105"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

回应

HTTP/1.0 500 INTERNAL SERVER ERROR
Content-Type: text/html; charset=utf-8
X-XSS-Protection: 0
Connection: close
Server: Werkzeug/2.0.0 Python/3.8.10
Date: Fri, 09 Sep 2022 17:52:09 GMT

再次感谢您的建议。

tuwxkamq

tuwxkamq1#

我在服务器端添加了下面的头文件,它似乎已经解决了这个问题。我不知道为什么当我切换axios时它停止工作了。用标准的asic调用它是好的。

resp.headers['Access-Control-Allow-Origin']='*'
resp.headers['Access-Control-Allow-Methods']='GET, POST, PUT, OPTIONS'
resp.headers["Access-Control-Allow-Headers"]="Access-Control-Request-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Headers,Access-Control-Allow-Origin, Origin, X-Requested-With, Content-Type, Accept"

相关问题