CORS включает вход в систему и следующий API и не работает для всех других API

Question

Я реализую приложение React и сервер узла в качестве бэкэнда. Недавно я обновил свою версию chrome. А также обновил некоторые API, но я не внес никаких изменений в CORS. Но из вчерашнего запроса на вход в систему и следующий запрос имеет успех (я имею в виду запросы при загрузке приложения), после этого любой запрос, который запускается из-за события в браузере, терпит неудачу.

Все запросы при загрузке приложения являются успешными, когда я go на любые другие маршруты, щелкнув ссылку API, вызовы в этом компоненте маршрута не работают. Я не понимаю причину успешной загрузки и получения ошибки CORS при любом запросе API на основе событий?

Мои варианты заголовков req / res:

Запрос:

Request URL: http://localhost:4000/apps
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:4000
Referrer Policy: no-referrer-when-downgrade

Заголовки Res:

Access-Control-Allow-Headers: authorization,orgid
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 0
Date: Sun, 02 Aug 2020 06:58:37 GMT
Strict-Transport-Security: max-age=15552000; includeSubDomains
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

Заголовки Req:

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: authorization,orgid
Access-Control-Request-Method: GET
Connection: keep-alive
Host: localhost:4000
Origin: http://localhost:3000
Referer: http://localhost:3000/apps/list
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36 Edg/84.0.522.52

Этот запрос всегда выполняется успешно.

Но у меня есть другой запрос (это требование при сбое CORS)

Req:

Request URL: http://localhost:4000/rs
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:4000
Referrer Policy: no-referrer-when-downgrade

res Headers "

Access-Control-Allow-Headers: appid,authorization
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 0
Date: Sun, 02 Aug 2020 06:59:21 GMT
Strict-Transport-Security: max-age=15552000; includeSubDomains
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

Req Headers:

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: appid,authorization
Access-Control-Request-Method: GET
Connection: keep-alive
Host: localhost:4000
Origin: http://localhost:3000
Referer: http://localhost:3000/apps/rs/list

Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36 Edg/84.0.522.52

Я включил CORS в API узла, например,

let cors = require('cors')
app.use(cors());
app.use(function (req, res, next) {
    next();
});
//routes start from here

Сообщение об ошибке:

Access to fetch at 'http://localhost:4000/rs' 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.

Неудачные заголовки запроса GET,

Request URL: http://localhost:4000/rs
Referrer Policy: no-referrer-when-downgrade

Заголовки res:

Connection: close

req Заголовки:

Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,te;q=0.8
Authorization: Bearer eyJpZCI6IjVkNTE5NjFlNWMzMDM1NDlkNDYwZjk
Connection: keep-alive
Content-Type: application/json
Host: localhost:4000
orgId: 5dca073d4b044330e44e7946
Origin: http://localhost:3001
Referer: http://localhost:3001/apps/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

Answer 1

Все это не требуется для отправки http-запроса. Это базовый пример c.

Должно получиться так:

Сервер. js

const express = require('express');
const cors = require('cors');

var app = express();
app.use(cors());

app.get('/', function(req, res) {
    res.json({'Hello':'World'});
});

app.listen(3000);

Клиент .. html

<html>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $.get("http://localhost:3000/", function(response) {
            console.log(resposne);
        });
    </script>
</html>

Answer 2

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // "*" means allow connection from any request url.
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Вы можете изменить * на разрешенный URL.

Или попробуйте этот cors tutorial убедитесь, что вы занесли свой URL в белый список. В вашем случае 'http://localhost: 3000'

// Set up a whitelist and check against it:
var whitelist = ['http://localhost:3000']
var corsOptions = {
    origin: function (origin, callback) {
        if (whitelist.indexOf(origin) !== -1) {
            callback(null, true)
        } else {
            callback(new Error('Not allowed by CORS'))
        }
    }
}

// Then pass them to cors:
app.use(cors(corsOptions));