对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。

Posted

技术标签:

【中文标题】对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。【英文标题】:Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 【发布时间】:2018-05-06 00:26:39 【问题描述】:

我正在使用 nodejs 服务器、express 框架和 fetch 库将请求发送到不同域中的另一台服务器。对于我的一个端点考虑(localhost:8080 / login),当用户单击登录按钮时,我正在呈现ejs文件,我正在向其他域中的api(https:otherserver.com/login)不同的服务器发送获取请求。我无法发送此请求。我收到此错误:

因此,Origin 'http://localhost:8080' 不允许访问。响应的 HTTP 状态代码为 404。如果不透明的响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我不确定如何处理这个问题。请提出一些可以解决此问题的想法或链接。

【问题讨论】:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource的可能重复 你的js文件中有app.use(cors());吗? @mast3rd3mon 是的,我用过。 那应该没有问题吧?这就是你启用 cors 的方式 您应该为 OPTIONS 方法(预检请求)添加 Access-Control-Allow-Origin '*'。对于 nodejs,您可以添加中间件 cors。 【参考方案1】:

您可以在您的服务器上使用cors 中间件。

最简单的使用方法是添加:

app.use(cors())

在所有路由处理程序之前。

【讨论】:

【参考方案2】:

我找到了解决问题的方法。我试图解释我的理解,因为我是服务器端和 Web 开发的初学者。

这是我面临的问题: 对于我的nodejs服务器中的一个端点,考虑(localhost:8080 / login)当用户单击该ejs文件中的登录按钮时,我正在呈现ejs文件,我正在向api发送获取请求(https:otherserver.com/登录)在其他域中的不同服务器。我无法发送此请求。我遇到了cors问题。

出现 Cors 问题是因为呈现 ejs 文件的服务器域(我的 nodejs 服务器)和我在单击登录按钮后发出 fetch 请求的另一个域(https:otherserver.com/signin)不同。

所以解决方案是:

我需要首先向同一个域(我的 nodejs 服务器 localhost:8080/api/signin)发出 fetch 请求。然后从这个服务器我应该调用其他域的api(https:otherserver.com/signin)。通过这样做,我们不会遇到任何 cors 问题。因为客户端 ejs 文件正在向渲染文件的同一服务器请求。然后服务器绕过对其他服务器的请求。

来自客户端 javascript 文件的代码。 /api/signin 是我本地 nodejs 服务器中的一个端点,您可以添加选项:

options =
    method : 'POST',
    headers : 
         'Accept': 'application/json',
        'Content-Type': 'application/json'
       

    body : JSON.stringify(
        email_address : emailId,
        password : pwd
    )
;

fetch("/api/signin",options)
.then(function(res) 
    console.log(res);
).catch(function(error) 
   console.log(error); 
); 

来自本地 nodejs 服务器端的代码:

express.use('/api/', function (req, res, next) 
     var options = 
        method : req.method,
        headers :req.headers,
        body : JSON.stringify(req.body)
    ; 

    fetch('https://otherserver.com'+req.path,options)
    .then(response =>          
        return response.json();
    , error =>  console.error(error))
    .then(function(json)
        res.send(json);
    )
    .catch(function(error)  
       res.send(error); 
    );

)

希望这对服务器开发的初学者有所帮助。

【讨论】:

以上是关于对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。的主要内容,如果未能解决你的问题,请参考以下文章

AWS - 对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头

.NET 5 对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头

Angular2对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头

对预检请求的响应未通过访问控制检查错误

在禁用 Web 安全模式下运行的 chrome 中,对预检请求的响应未通过访问控制检查

错误 - 预检请求未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头