Почему я получаю ошибку CORS при туннелировании через ngrok? - PullRequest
Новая
       79

Почему я получаю ошибку CORS при туннелировании через ngrok?

0 голосов
/ 04 марта 2020

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

Я работаю на веб-сайте локально, и я хочу протестировать его на различных платформах и устройствах, поэтому я решил использовать для этого ngrok.

Мой интерфейс работает на порту 3000 и мой express сервер на порту 5000.

Итак, я открыл ngrok и ввел ngrok http 3000

На моем локальном P C, где работает сервер, https://example.ngrok.io работает как и предполагалось, без каких-либо проблем.

Но на моем ноутбуке (или другом устройстве) внешний интерфейс отображается правильно, но когда он действительно получает данные от внутреннего интерфейса, он показывает ошибку: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/weather/51.87575912475586,0.9436600208282471. (Reason: CORS request did not succeed).

На моем express сервере я использовал пакет cors и app.use(cors());, а также попытался добавить заголовки вручную: 

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});

Источник: Почему добавление заголовков CORS в маршрут OPTIONS не позволяет браузерам получать доступ к моему API?

Вот также мой код, из которого я получаю и получаю данные в случае, если я что-то там не так делаю:

index. js (front-end) 

const response = await fetch(`http://localhost:5000/weather/${lat},${lng}`); //sending request to server-side

const json = await response.json();

console.log(json); //getting the weather data from server-side

server. * 104 1 * (back-end) 

const express = require("express");
const mongoose = require("mongoose");
const fetch = require("node-fetch");
const cors = require('cors');
const nodemailer = require('nodemailer');
require('dotenv').config();

const users = require('./routes/api/users');

const app = express();


//Json Middleware
app.use(express.json());

app.use(cors());


//Getting URI from keys file
const db = require('./config/keys').mongoURI;


//Connect to the Database
mongoose.set('useUnifiedTopology', true);
mongoose.set('useCreateIndex', true);
mongoose.connect(db, {useNewUrlParser: true})
.then(()=> console.log("Database Connected"))
.catch(err=> console.log(err));

//Route for user routes
app.use('/api/users',users);

const dbport = process.env.PORT || 5000;

app.listen(dbport, () => console.log(`Server started on port ${dbport}`));

app.get('/weather/:latlon', async (req,res) =>{ //awating request from client-side

    const latlon = req.params.latlon.split(',');

    console.log(req.params);

    const lat = latlon[0];
    const lon = latlon[1];

    console.log(lat,lon);

    const api_key = process.env.API_KEY;

    const weather_url = `https://api.darksky.net/forecast/${api_key}/${lat},${lon}?units=auto`; //getting data from weather API
    const fetch_res = await fetch(weather_url);
    const json = await fetch_res.json();
    res.json(json); //sending weather data back to client-side
});

Возможно ли это сработать или нет из-за природы localhost?

И у firefox и chrome возникла одна и та же проблема.

Спасибо за помощь!

1 Ответ

0 голосов
/ 07 марта 2020

После нескольких дней царапин на голове я наконец-то нашел решение и выкладываю его ниже для других, у которых может быть такая же проблема.

Шаг 1:

Вместо того, чтобы 2 активных порта (3000 для клиента и 5000 для сервера), я закрыл свой клиентский порт и обслуживал свою клиентскую папку / ресурсы непосредственно с моего сервера, используя express: 

const dbport = process.env.PORT || 5000;

app.listen(dbport, () => console.log(`Server started on port ${dbport}`));

app.use(express.static('client')); //serving client side from express
//Json Middleware
app.use(express.json());

Шаг 2:

Теперь, когда у нас есть один порт (порт 5000) как для клиента, так и для сервера, я перешел на сторону клиента, где выполнял свои запросы на выборку. (см. выше в index. js) и изменил фактические запросы, чтобы они были относительными: 

const response = await fetch(`/weather/${lat},${lng}`); //sending request to server-side


const json = await response.json();

console.log(json); //getting the weather data from server-side

Шаг 3:

Наконец, я открыл ngrok и набрал: 

ngrok http 5000

Теперь должно работать.

...