未经授权获取请求：MEAN Stack

Question

为了验证我的代码，我使用的是 passport.js。当我使用 get request 方法时，我收到错误

无法加载http://localhost:3000/users/profile：请求标头 Access-Control-Allow-Headers 不允许字段授权 预检响应。

这是我的代码。

    authToken: any;
        getProfile() {
            let headers = new Headers();
            this.loadToken();
            headers.append('Authorization', this.authToken);
            headers.append('Content-Type','application/json');
            return this.http.get('http://localhost:3000/users/profile',{headers: headers})
              .map(res => res.json());
          }
        loadToken(){
           const token = localStorage.getItem('id_token');
           this.authToken = token;
         }
storeUserData(token, user){
    localStorage.setItem('id_token', token);
    localStorage.setItem('user', JSON.stringify(user));
    this.authToken = token;
    this.user = user;
  }

这是来自我的路线文件

// Profile
router.get('/profile', passport.authenticate('jwt', {session:false}), (req, res, next) => {
    res.json({user: req.user});
  });

Answer 1

您在使用跨域资源共享 (CORS) 时遇到问题：这种机制为网络服务器提供跨域访问控制，从而实现安全的跨域数据传输。

最简单的修复，npm i cors 然后在您的 Express.js 应用程序中，在其他任何事情之前：

const cors = require('cors');
var app = express();
app.use(cors());

或者如果你不想要额外的依赖：

var app = express();
app.use( (req,res,next) => {
   res.header('Access-Control-Allow-Origin', '*');
   res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
   next();
})