Zeit(Vercel)现在，由于CORS，无服务器身份验证请求失败 [英] Zeit (Vercel) Now serverless authenticated requests failing because of CORS

问题描述

从浏览器发送Authorization标头和Bearer token发出浏览器的PATCH/POST/PUT请求时，我无法正确处理CORS问题(这在浏览器外部正常工作和GET请求)在立即无服务器Zeit 中.

I'm not able to correctly handle CORS issues when doing either PATCH/POST/PUT requests from the browser sending an Authorization header with a Bearer token (this works correctly outside of the browser and for GET requests) in Zeit Now serverless.

如果有帮助，我正在使用 Auth0 作为授权方.

I'm using Auth0 for the authorization side if that helps.

这是我的now.json标头部分，我已经尝试了很多组合，但是都没有从浏览器中获得成功.

This is my now.json headers section, I've tried a lot of combinations for these, but neither succeeded from the browser.

1. 我尝试使用npm cors软件包失败
2. 试图在now.json
中添加routes
3. 尝试使用res.addHeader()
将设置标头设置在无服务器功能的顶部
4. 还尝试通过以下方式手动处理OPTIONS请求:

1. I tried using npm cors package without success
2. Tried to add routes in now.json
3. Tried setting headers at the top of the serverless function using res.addHeader()
4. Also tried handling OPTIONS request manually doing variations of this:

最后，这是我得到的错误

Finally, this is the error that I get

Access to XMLHttpRequest at 'https://api.example.org/api/users' from origin 'https://example.org' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

不确定我的错或如何正确处理此问题.

Not sure what I'm wrong or how to handle this properly.

推荐答案

我能够使用 micro-cors .

我检查了其代码，但它没有我通过手动使用res.setHeader尝试自己做的事情与以前没有什么不同，可能是我猜不到的东西.

I checked its code and it doesn't differ that much of what I attempted to do myself by using res.setHeader manually, probably missed something I guess.

尽管如此，我仍然不明白为什么now.json中的设置无法正常工作，我需要在无服务器功能中手动执行此操作.

Nevertheless I don't understand why the settings in now.json were not working correctly and I need to perform this manually in the serverless function.

无论如何，万一其他人找到了这个帖子，我最终会得到这样的东西:

Anyways, in case someone else finds this post, I ended up with something like this:

import micro from "micro-cors";

function MyApi(req, res) {
  if (req.method === "OPTIONS") {
    return res.status(200).end();
  }
  // handling other requests normally after this
}

const cors = micro();

export default cors(MyApi);

我可能会再尝试使用一种自行编写的解决方案，以便更好地了解出了什么问题，也因为我不想增加依赖性.

I'll probably will try again with a self-written solution in order to understand better what went wrong and also because I don't want an extra dependency.

如果我这样做，将更新此答案.

Will update this answer if I do that.

在更深入地检查之后，我发现另一个问题是库express-jwt在jwt解析失败时专门更改了res对象.

After checking a bit deeper I found that another issue was the library express-jwt specifically changing the res object when the jwt parse failed.

我有一个小型的中间件，它通过以下操作破坏了一切:

I had a small middleware that was breaking everything by doing:

await authValidateMiddleware(req, res);

当await失败时，它会中断所有内容，因为express-jwt不知不觉地更改了res标头(设置错误)，然后我尝试手动设置res标头，以尝试正确处理错误我自己，因此引发了有关多次更改res标头" 的问题.

When that await failed, it broke everything down the line because express-jwt changed the res headers unknowingly (setting the error) and then I tried to set the res headers manually trying to handle the error correctly myself, therefore throwing issues about "changing the res headers more than once".

这篇关于Zeit(Vercel)现在，由于CORS，无服务器身份验证请求失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！