CORS / CORB проблема с React / Node / Express и Google OAuth

Question

У меня есть приложение реагирования, к которому я пытаюсь добавить серверную часть Node / Express / MySQL с помощью OAuth.Мое приложение React размещено на localhost: 3000, а экспресс-сервер на localhost: 4000.Я добавил «proxy»: «http://localhost:4000" в файл package.json реагирующего приложения для отправки запросов на сервер. Авторизованный источник Javascript для OAuth: http://localhost:4000. URI авторизованного перенаправления: http://localhost:4000/auth/google/redirect.

Это ошибки, которые я получаю в консоли браузера, когда пытаюсь добраться до маршрута на сервере:

Кто-то говорит: «Нет Access-Control-Allow-Origin» заголовокприсутствует в запрошенном ресурсе.

Другой говорит: «Блокировка перекрестного чтения (CORB) заблокировала перекрестный ответ .... с типом MIME text / html.»

У меня естьПонятия не имею, что я делаю неправильно, и я застрял со вчерашнего дня.

Failed to load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fauth%2Fgoogle%2Fredirect&scope=profile&client_id={clientiddeletedbyme}.apps.googleusercontent.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.   

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fauth%2Fgoogle%2Fredirect&scope=profile&client_id={iddeletedbyme}apps.googleusercontent.com with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Вот мой код в файле package.json для моего приложения реагирования:

{
  "name": "workout_tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "firebase": "^5.3.0",
    "jw-paginate": "^1.0.2",
    "jw-react-pagination": "^1.0.7",
    "normalize.css": "^8.0.0",
    "random-id": "0.0.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-headroom": "^2.2.2",
    "react-icons-kit": "^1.1.6",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts-cssmodules": "^1.1.10",
    "react-swipe-to-delete-component": "^0.3.4",
    "react-swipeout": "^1.1.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "redux-devtools-extension": "^2.13.5"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy":"http://localhost:4000"
}

Вот код в моем приложении реакции, которое отправляет запрос на сервер:

express=()=>{
axiosInstance.get("/google").then(res=>{
  console.log(res);
}).catch(err=>console.log(err));
}

Вот код на сервере

   let express = require("express");
let cors= require("cors");
let mysql = require("mysql");
const util = require("util");
const passportSetup = require("./config/passport-setup");
const passport = require("passport");

let app = express();

let connection =mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "root",
    database: "Workout_Tracker",
    socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
});



app.use(cors(
{origin:"http://localhost:3000",
    credentials:true,
    allowHeaders:"Content-Type"
}
));

app.options("/google", cors());
app.get("/google", cors(), passport.authenticate("google",{

    scope:['profile']

}));

...omitted a bunch of SQL queries

app.listen(4000, () => console.log("Listening on port 4000!"));

Answer 1

Вот пример кода нового промежуточного программного обеспечения, которое вам нужно установить, чтобы выразить ДО вы определяете любые маршруты:

const cors = require('cors');

app.use('*', function(req, res, next) {
//replace localhost:8080 to the ip address:port of your server
res.header("Access-Control-Allow-Origin", "http://localhost:8080");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials', true);
next(); 
});

//enable pre-flight
app.options('*', cors());

Но перед копированием и вставкой, просто чтобы вы знали, чтоВам необходимо npm install cors --save перед импортом Cors.Приведенный выше пример кода просто означает:

1. мы разрешаем другой IP-адрес для доступа к серверу для всех определенных вами маршрутов
2. Разрешить 'X-Requested-With' и a 'Параметры Content-Type 'внутри заголовка.Обычно вам не нужно специально их определять, но хорошо, что они есть.
3. Только с разрешенными учетными данными, установленными в true, ваш сеанс / куки могут сохранять во время обновления страниц внешнего интерфейса, что, я думаю, может быть полезным для вашего будущего развития.Также будет разрешен
4. предполетный запрос, который многие библиотеки Http будут отправлять по умолчанию.
5. для вашего интерфейса, если вы используете axios, вам нужно: axios.create({ withCredentials: true });, чтобы сказать: и реагируют, и выражают согласие использовать CORS.И так же в других библиотеках http.

Вот некоторая документация, на которую вы можете посмотреть: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 2

Вот мой пример использования CORS с expressJs, это необходимо сделать на бэкэнде или на стороне сервера.Сервер останавливает доступ своего API из внешнего мира, а не со стороны клиента.

// IP's allowed all access this server
let whitelist = ['http://localhost:3000', 'http://127.0.0.1:3000'];

let corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
};

// Cross-Origin Resource Sharing
app.use(cors(corsOptions));

Answer 3

Вместо того, чтобы использовать AJAX для запроса конечной точки, я должен был перейти туда через браузер.Я использовал тег <a> с href, равным "http://localhost:4000", и он работал как ожидалось.