在请求的资源上没有“Access-Control-Allow-Origin”头信息错误,而Postman则没有

在请求的资源上没有“Access-Control-Allow-Origin”头信息错误,而Postman则没有

当一个来自一个域的客户端尝试发送一个请求到托管在另一个域上的资源时,经常会出现“在请求的资源上没有“Access-Control-Allow-Origin”头信息”的错误。这是由于“同源策略”的存在,这是一个Web浏览器安全功能,防止恶意脚本未经授权访问其他域上的资源。

另一方面,Postman是一个API测试工具,其功能与Web浏览器不同,并且不遵循浏览器的同源策略。因此,在向位于不同域中的资源发送请求时,您不会遇到此错误。

解决方法: 上述问题可以使用两种方法解决,如下所述:

  • 我们可以配置Web服务器以允许来自所需来源的请求。这是一个简单的解决方案,通常用于解决此问题。
  • 我们还可以使用代理服务器,该服务器将从与浏览器相同的源发出请求。与上述方法相比,这种解决方案更为复杂,但如果您不想配置Web服务器以允许来自其他来源的请求,那么这是一种理想的方法。

方法1: 要演示涉及设置我们要允许访问资源的每个来源的方法1,以下是一个使用 Cors中间件 启用选择性跨源请求的示例NodeJS应用程序:

// Node app to demonstrate the use of cors module 
  
// Importing modules 
const express = require("express"); 
const cors = require("cors"); 
  
// Creating express object 
const app = express(); 
  
// Using cors middleware to allow all origins 
app.use(cors()); 
  
// Creating get route 
app.get("/", (req, res) => { 
    res.send("Hello World"); 
}); 
  
// Listening to port 
app.listen(3000, () => { 
    console.log("Server started at port 3000"); 
});

现在服务器已创建,让我们向其发送请求。

在请求的资源上没有“Access-Control-Allow-Origin”头信息错误,而Postman则没有

// Modified the same code above
// Using cors middleware to allow example.com 
// and example.net to access the resources
app.use(
      cors({
        origin: ["http://example.com", "http://example.net"],
      })
);

上述的cors定义将允许请求来自example.comexample.net的资源访问。

方法2: 在方法2中,我们将使用代理作为客户端和资源服务器之间的中间件,一旦客户端请求资源(例如来自xyz.com的图片),运行在同一服务器上的代理将使用服务器本身的源将请求转发给运行的服务,而不是客户端,从而解决了CORS问题。

示例: 以下是该方法的演示,

// Node app to demonstrate the proxy 
// server approach to CORS issues 
  
// Load the express package and create our app 
let express = require("express"); 
  
// Importing createProxyMiddleware from  
// http-proxy-middleware 
const { createProxyMiddleware }  
    = require("http-proxy-middleware"); 
  
let app = express(); 
  
// creating a proxy middleware  
// function for the path /api 
const apiProxy = createProxyMiddleware("/api", { 
    target: "http://example.com", 
    changeOrigin: true, 
}); 
  
// Telling the app to use the proxy 
// middleware for the path /api 
app.use("/api", apiProxy); 
  
// Start the server 
app.listen(3000, () => { 
    console.log("Server running on port 3000"); 
});

输出:

在请求的资源上没有“Access-Control-Allow-Origin”头信息错误,而Postman则没有

一旦您发起对/api路由的请求,它将重定向您到指定的URL example.com

在请求的资源上没有“Access-Control-Allow-Origin”头信息错误,而Postman则没有

通过将请求路由到代理中间件,浏览器从与服务器相同的源发出请求,避免了跨源问题。

注意: 请注意,添加Access-Control-Allow-Origin头到资源的HTTP响应应谨慎进行,考虑到安全影响。允许从任何域名访问(使用“*”通配符)可能使您的资源容易受到跨站脚本攻击(XSS),这可能使整个系统容易受到恶意攻击,并可能导致灾难性后果。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程