1、has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

原因：跨域的allow_headers沒(méi)有設(shè)置authorization

 "allow_headers": ["Referer", "Accept", "Origin", "User-Agent"]

解決方法，加個(gè)Authorization就可以

"allow_headers": ["Referer", "Accept", "Origin", "User-Agent", "Authorization"]

2、has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

原因：Access-Control-Allow-Credentials設(shè)置為T(mén)rue, Control-Allow-Origin就不能為"*"。

解決方法：
（1）前端配置withCredentials=true, 后端把Origin設(shè)置為指定源，同時(shí)加上Credentials=true

http {
    server {
        listen 80;
        server_name localhost;
        修改為
        add_header 'Access-Control-Allow-Origin' 'host:port';
        add_header "Access-Control-Allow-Credentials" "true"; # 新增這一個(gè)
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

(2) 前端配置withCredentials=false, 后端把Origin不修改

3、出現(xiàn)多個(gè)origin, has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://192.168.3.46:9528, *’, but only one is allowed.

原因：可能是出現(xiàn)重復(fù)配置跨域?qū)е?。我出現(xiàn)這個(gè)原因因?yàn)閚ginx和flask兩個(gè)都配置了跨域請(qǐng)求，導(dǎo)致一個(gè)出現(xiàn)這種情況
下面是我配置信息：

# falsk配置信息
cors = CORS(resources={
    r"*": {
        "origins": "*",
        "methods": ["PUT", "GET", "POST", "DELETE", "OPTIONS"],
        "allow_headers": ["Referer", "Accept", "Origin", "User-Agent", "Token"],

    }
})

# nginx配置信息
http {
    server {
        listen 80;
        server_name localhost;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        location / {
            proxy_pass http://flask_app:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }

解決方法：兩個(gè)保留其中一個(gè)就可以文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-429469.html

到了這里，關(guān)于前后端分離常見(jiàn)跨域問(wèn)題及解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！