我的前端运行一个Azure静态Web应用程序,后端运行一个Azure Web应用程序。我已使用此应用程序几个月。今天,在部署一些更改后,我的后端一直响应CORS错误。具体而言,错误为:
CORS策略已阻止从源"https://www.example.com"访问位于"https://memoriesforusbe.azurewebsites.net/auth?userEmail=xxxxxxxxxxxxxxx和userPassword=xxxxxxxxxxxxx"的XMLHttpRequest:www.memoriesforus.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- 更新:今天早上我做了更多测试,发现响应因用户而异。CORS响应基于发送的数据,这对我来说毫无意义?比以前更困惑。**
我在node.js服务器文件中的头文件是:
res.header("Access-Control-Allow-Origin", "https://login.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://www.memoriesforus.com");
为了修复这个问题,我添加了以下内容,希望通配符能有所帮助。
res.header("Access-Control-Allow-Origin", "https://*.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://memoriesforus.com");
我还注意到Azure Web Apps有一个针对CORS的刀片,我试着在那里添加我的头,结果也是一样的。
这个错误发生在应用程序的登录界面上。我有几个API不需要用户登录或使用令牌。所以我尝试了这些API,它们似乎工作正常。所以我想这可能与此有关?
我只是很困惑,因为原始请求标头工作了这么长时间。我是否应该查看可能导致此错误的其他内容?我在后端所做的更改与CORS无关。不确定应用程序服务是否发生了更改?我还将更改上载到前端。但获取错误的API调用也未更改。
node.js服务器文件的整个CORS相关部分当前如下所示:
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "https://login.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://www.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://*.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://salmon-plant-09df42110.2.azurestaticapps.net"); //the auto generated name of the frontend on Azure
if(process.env.SERVER_STATUS === 'Dev' ) {
res.header("Access-Control-Allow-Origin", "*"); }
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
if (req.method === "OPTIONS") {
res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
return res.status(200).json({});
}
next();
});
1条答案
按热度按时间js4nwp541#
Access-Control-Allow-Origin
标头。不能有两个或更多。*
字符是一个特殊值,表示“任意原点”,它不是一个占位符,不能作为原点的 part 通配符包含在允许的原点中。要允许多个(但不是所有)原点,您需要:
1.读取
Origin
* 请求 * 标头1.将其与您想要编写的任何规则进行比较,以查看它是否是允许的原点
1.如果
res.header("Access-Control-Allow-Origin", the_origin_request_header_value);
为1,则包括它您似乎正在使用Express,如果是这样,the
cors
module将为您处理这个问题(并允许您将有效的源指定为列表、正则表达式或自定义函数)。