Node.js 在尝试从电影数据库Api访问数据时，如何解决此CORS错误？

提前谢谢您

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = (req, res, next) => {
    const token = req.header('x-auth-token');
    
    if(!token) {
        return res.status(401).json({ message: 'No token, authorization denied' })
    }
 

    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));
        console.log('Decoded', decoded)

        req.user = decoded.user;
        console.log('Req User', req.user)
        next();
    } catch (err) {
        res.status(401).json({ message: 'Token is not valid' })
    }
}

// @route    GET api/auth
// @desc     Get user by token
// @access   Private
router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

我知道这里有很多问题，要想解决这个问题肯定会非常困难。我只想说我很感激任何一个花时间来解决我的麻烦的人。这是我真正完成的第一个项目，碰到像这样的顽固的东西真是太糟糕了，哈哈。这就是我们签约的原因。我仍将继续努力独自解决这个问题。再次感谢

实时错误示例

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = (req, res, next) => {
    const token = req.header('x-auth-token');
    
    if(!token) {
        return res.status(401).json({ message: 'No token, authorization denied' })
    }
 

    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));
        console.log('Decoded', decoded)

        req.user = decoded.user;
        console.log('Req User', req.user)
        next();
    } catch (err) {
        res.status(401).json({ message: 'Token is not valid' })
    }
}

// @route    GET api/auth
// @desc     Get user by token
// @access   Private
router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

现场工作示例

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = (req, res, next) => {
    const token = req.header('x-auth-token');
    
    if(!token) {
        return res.status(401).json({ message: 'No token, authorization denied' })
    }
 

    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));
        console.log('Decoded', decoded)

        req.user = decoded.user;
        console.log('Req User', req.user)
        next();
    } catch (err) {
        res.status(401).json({ message: 'Token is not valid' })
    }
}

// @route    GET api/auth
// @desc     Get user by token
// @access   Private
router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

问题

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = (req, res, next) => {
    const token = req.header('x-auth-token');
    
    if(!token) {
        return res.status(401).json({ message: 'No token, authorization denied' })
    }
 

    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));
        console.log('Decoded', decoded)

        req.user = decoded.user;
        console.log('Req User', req.user)
        next();
    } catch (err) {
        res.status(401).json({ message: 'Token is not valid' })
    }
}

// @route    GET api/auth
// @desc     Get user by token
// @access   Private
router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

在整个问题中有三个步骤。第三步是我遇到问题的地方

第一步，当应用程序加载时，它将呈现一个登录组件页面，该页面将请求用户凭据。然后我将使用有效凭据登录。一旦我点击submit，它就会点击我在后端的一条与用户身份验证有关的快捷路线。这个路由将要做的是检查我的MongoDB，看看这个用户是否已经存在，然后从“jsonwebtoken”npm包生成一个令牌，并将该令牌作为响应发送回来。在前端，我将拥有在本地存储中设置该令牌的功能。如果本地存储中存在令牌，那么我将加载用户凭据（令牌、用户名等）并重新路由到/home组件

第二步，一旦主组件呈现/装载，我将从前端向电影数据库Api发出另一个请求，并呈现显示其电影横幅的流行电影列表。 返回的数据很好

第三步和问题，当我点击一部流行电影时，我从前端向电影数据库Api发出另一个请求，该Api将流行电影的Id作为参数传递，并作为响应返回电影详细信息。同时，我将路由到movieDetails组件。问题是，我实际上没有得到数据。相反，我得到了CORS错误

CORS错误

export const loadUser = () => async dispatch => {
    if(localStorage.token) {
        setAuthToken(localStorage.token)
    }

    try {
        const res = await axios.get('/api/auth');
        dispatch({
            type: USER_LOADED,
            payload: res.data
        })
        console.log(res.data)
    } catch (err) {
        dispatch({
            type: AUTH_ERROR
        })
    }
}

访问位于“”的XMLHttpRequesthttps://api.themoviedb.org/3/movie/419704?api_key=XXXXXX&append_to_response=credits“起源”http://localhost:3000'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段x-auth-token

其他控制台错误

import React, { Fragment, useEffect } from "react";
import "./App.css";
import { Route, Switch } from "react-router-dom";
// Components
import Landing from "./pages/landing/landing.component";
import Home from "./pages/home/home.component";
import Navbar from "./components/navbar/navbar.component";
import MovieDetails from "./pages/movie-details/movie-details.component";
import Search from "./pages/search/search.component";
import Sidebar from "./components/sidebar/sidebar.component";
import SidebarDesktop from "./components/sidebar-desktop/sidebar-desktop.component";
import SignInAndSignUp from "./pages/sign-in-and-sign-up/sign-in-and-sign-up.component";
import Thread from "./pages/thread/thread.component";
import SignUp from "./pages/sign-up/sign-up.component";

// Redux
import { connect } from "react-redux";
import { getPopular } from "./redux/movies/movies.actions";
import { loadUser } from "./redux/auth/auth.actions";
import setAuthToken from "./utils/setAuthToken";

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = ({ getPopular, loadUser }) => {
  useEffect(() => {
    getPopular();
    console.log("Rendered");
    loadUser();
  }, []);
  return (
    <Fragment>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route exact path="/home" component={Home} />
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/movie-details/:slug" component={MovieDetails} />
        <Route exact path="/search/:title" component={Search} />
        <Route exact path="/sign-in-and-sign-up" component={SignInAndSignUp} />
      </Switch>
    </Fragment>
  );
};

export default connect(null, { getPopular, loadUser })(App);

获取网络：：ERR_失败

未捕获（承诺中）错误：网络错误 在createError（createError.js:16） 位于XMLHttpRequest.handleError（xhr.js:83）

setAuthToken（）部分

此外，我还有一个名为setAuthToken的实用程序函数，它涉及上面CORS错误中显示的“x-auth-token”。 这几乎只是为每个axios请求将x-auth-token头设置为一个present token，前提是存在一个token

import axios from 'axios';

const setAuthToken = (token) => {
    if(token) {
        axios.defaults.headers.common['x-auth-token'] = token;
        console.log(axios.defaults.headers.common)
    }else {
        delete axios.defaults.headers.common['x-auth-token']
    }
}

export default setAuthToken;

我在App.js中使用了两次此函数

App.js

import React, { Fragment, useEffect } from "react";
import "./App.css";
import { Route, Switch } from "react-router-dom";
// Components
import Landing from "./pages/landing/landing.component";
import Home from "./pages/home/home.component";
import Navbar from "./components/navbar/navbar.component";
import MovieDetails from "./pages/movie-details/movie-details.component";
import Search from "./pages/search/search.component";
import Sidebar from "./components/sidebar/sidebar.component";
import SidebarDesktop from "./components/sidebar-desktop/sidebar-desktop.component";
import SignInAndSignUp from "./pages/sign-in-and-sign-up/sign-in-and-sign-up.component";
import Thread from "./pages/thread/thread.component";
import SignUp from "./pages/sign-up/sign-up.component";

// Redux
import { connect } from "react-redux";
import { getPopular } from "./redux/movies/movies.actions";
import { loadUser } from "./redux/auth/auth.actions";
import setAuthToken from "./utils/setAuthToken";

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = ({ getPopular, loadUser }) => {
  useEffect(() => {
    getPopular();
    console.log("Rendered");
    loadUser();
  }, []);
  return (
    <Fragment>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route exact path="/home" component={Home} />
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/movie-details/:slug" component={MovieDetails} />
        <Route exact path="/search/:title" component={Search} />
        <Route exact path="/sign-in-and-sign-up" component={SignInAndSignUp} />
      </Switch>
    </Fragment>
  );
};

export default connect(null, { getPopular, loadUser })(App);

中间件-获取身份验证路由

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = (req, res, next) => {
    const token = req.header('x-auth-token');
    
    if(!token) {
        return res.status(401).json({ message: 'No token, authorization denied' })
    }
 

    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));
        console.log('Decoded', decoded)

        req.user = decoded.user;
        console.log('Req User', req.user)
        next();
    } catch (err) {
        res.status(401).json({ message: 'Token is not valid' })
    }
}

// @route    GET api/auth
// @desc     Get user by token
// @access   Private
router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

获取授权路由

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = (req, res, next) => {
    const token = req.header('x-auth-token');
    
    if(!token) {
        return res.status(401).json({ message: 'No token, authorization denied' })
    }
 

    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));
        console.log('Decoded', decoded)

        req.user = decoded.user;
        console.log('Req User', req.user)
        next();
    } catch (err) {
        res.status(401).json({ message: 'Token is not valid' })
    }
}

// @route    GET api/auth
// @desc     Get user by token
// @access   Private
router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

此时，应用程序现在拥有当前已验证用户的信息

重复操作

import React, { Fragment, useEffect } from "react";
import "./App.css";
import { Route, Switch } from "react-router-dom";
// Components
import Landing from "./pages/landing/landing.component";
import Home from "./pages/home/home.component";
import Navbar from "./components/navbar/navbar.component";
import MovieDetails from "./pages/movie-details/movie-details.component";
import Search from "./pages/search/search.component";
import Sidebar from "./components/sidebar/sidebar.component";
import SidebarDesktop from "./components/sidebar-desktop/sidebar-desktop.component";
import SignInAndSignUp from "./pages/sign-in-and-sign-up/sign-in-and-sign-up.component";
import Thread from "./pages/thread/thread.component";
import SignUp from "./pages/sign-up/sign-up.component";

// Redux
import { connect } from "react-redux";
import { getPopular } from "./redux/movies/movies.actions";
import { loadUser } from "./redux/auth/auth.actions";
import setAuthToken from "./utils/setAuthToken";

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = ({ getPopular, loadUser }) => {
  useEffect(() => {
    getPopular();
    console.log("Rendered");
    loadUser();
  }, []);
  return (
    <Fragment>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route exact path="/home" component={Home} />
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/movie-details/:slug" component={MovieDetails} />
        <Route exact path="/search/:title" component={Search} />
        <Route exact path="/sign-in-and-sign-up" component={SignInAndSignUp} />
      </Switch>
    </Fragment>
  );
};

export default connect(null, { getPopular, loadUser })(App);

这就是我在尝试访问特定电影的详细信息时遇到CORS错误的地方

export const getMovieById = (id) => async (dispatch) => {
  let API_KEY = "XXXXXXX";
  let baseURL = "https://api.themoviedb.org/3/";

  try {
    axios
      .get(
        `${baseURL}movie/${id}?api_key=${API_KEY}&append_to_response=credits`
      )

      .then((res) => {
        // Target Cast List and Enable Profile Image
        res.data.credits.cast.map((profile) => {
          profile.profile_image = `https://image.tmdb.org/t/p/original${profile.profile_path}`;
        });
        res.data.credits.cast.map((profile) => {
          if (
            profile.profile_image === "https://image.tmdb.org/t/p/originalnull"
          ) {
            profile.notFoundIcon = "fas fa-user fa-3x";
          }
        });

        // Target Crew List and Enable Profile Image
        res.data.credits.crew.map((profile) => {
          profile.profile_image = `https://image.tmdb.org/t/p/original${profile.profile_path}`;
        });
        res.data.credits.crew.map((profile) => {
          if (
            profile.profile_image === "https://image.tmdb.org/t/p/originalnull"
          ) {
            profile.notFoundIcon = "fas fa-user fa-3x";
          }
        });

        const movie = {
          ...res.data,
          customImageURL: `https://image.tmdb.org/t/p/w500${res.data.poster_path}`,
          customBanner: `https://image.tmdb.org/t/p/w500${res.data.backdrop_path}`,
        };

        dispatch({
          type: GET_MOVIE_DETAILS,
          payload: movie,
        });
      });
  } catch (err) {
    if (err) throw err;
    console.log("Server Error");
    console.error("Server Error");
  }
};

最后的想法

import React, { Fragment, useEffect } from "react";
import "./App.css";
import { Route, Switch } from "react-router-dom";
// Components
import Landing from "./pages/landing/landing.component";
import Home from "./pages/home/home.component";
import Navbar from "./components/navbar/navbar.component";
import MovieDetails from "./pages/movie-details/movie-details.component";
import Search from "./pages/search/search.component";
import Sidebar from "./components/sidebar/sidebar.component";
import SidebarDesktop from "./components/sidebar-desktop/sidebar-desktop.component";
import SignInAndSignUp from "./pages/sign-in-and-sign-up/sign-in-and-sign-up.component";
import Thread from "./pages/thread/thread.component";
import SignUp from "./pages/sign-up/sign-up.component";

// Redux
import { connect } from "react-redux";
import { getPopular } from "./redux/movies/movies.actions";
import { loadUser } from "./redux/auth/auth.actions";
import setAuthToken from "./utils/setAuthToken";

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = ({ getPopular, loadUser }) => {
  useEffect(() => {
    getPopular();
    console.log("Rendered");
    loadUser();
  }, []);
  return (
    <Fragment>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route exact path="/home" component={Home} />
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/movie-details/:slug" component={MovieDetails} />
        <Route exact path="/search/:title" component={Search} />
        <Route exact path="/sign-in-and-sign-up" component={SignInAndSignUp} />
      </Switch>
    </Fragment>
  );
};

export default connect(null, { getPopular, loadUser })(App);

所以我有两个服务器在运行，它们是react和express。我使用npm包“并发”同时运行两台服务器。我在package.json中有正确的代码，可以实现这一点。此外，我正在通过连接到后端的react client package.json运行代理

这是踢球者

export const loadUser = () => async dispatch => {
    if(localStorage.token) {
        setAuthToken(localStorage.token)
    }

    try {
        const res = await axios.get('/api/auth');
        dispatch({
            type: USER_LOADED,
            payload: res.data
        })
        console.log(res.data)
    } catch (err) {
        dispatch({
            type: AUTH_ERROR
        })
    }
}

当我只启动react服务器而不是两者都启动时，我的应用程序运行良好，并且在单击流行电影以检索电影数据时，我没有遇到CORS错误。但是当我同时运行这两个服务器时，我会在单击一部流行电影时出现CORS错误

实时错误示例

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = (req, res, next) => {
    const token = req.header('x-auth-token');
    
    if(!token) {
        return res.status(401).json({ message: 'No token, authorization denied' })
    }
 

    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));
        console.log('Decoded', decoded)

        req.user = decoded.user;
        console.log('Req User', req.user)
        next();
    } catch (err) {
        res.status(401).json({ message: 'Token is not valid' })
    }
}

// @route    GET api/auth
// @desc     Get user by token
// @access   Private
router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

现场工作示例

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = (req, res, next) => {
    const token = req.header('x-auth-token');
    
    if(!token) {
        return res.status(401).json({ message: 'No token, authorization denied' })
    }
 

    try {
        const decoded = jwt.verify(token, config.get('jwtSecret'));
        console.log('Decoded', decoded)

        req.user = decoded.user;
        console.log('Req User', req.user)
        next();
    } catch (err) {
        res.status(401).json({ message: 'Token is not valid' })
    }
}

// @route    GET api/auth
// @desc     Get user by token
// @access   Private
router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

---

需要主服务器文件中的COR，我认为在您的情况下是app.js 使用安装cors

npm install cors

而不是在app.js文件中要求它

let cors = require('cors');

此后

app.use(cors());

---

这将接受客户端的所有请求

只是好奇您是否正在使用电影API服务器上的“cors”包

出现此问题的最可能原因是React应用程序和电影数据库API之间的飞行前检查。在进行任何通信之前，浏览器会询问服务器是否配置为接受来自不同来源的请求

要解决“CORS”问题，您需要通过安装以下软件包来允许跨源。请确保您在电影数据库API项目中

npm install cors

安装软件包后，需要配置电影数据库API中间件，并将以下内容添加到express应用程序中

首先导入包依赖项：

const cors = require('cors');

假设express应用程序的初始化存储在名为“app”的变量中：

如果您想了解有关“cors”软件包的更多信息，请参阅下面的链接。如果链接过期，您可以在web上快速搜索“express cors”

---

虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-那么你面临的问题是什么？