关于JavaScript的同源政策是什么

同源政策是一种安全机制，它限制了从一个特定来源加载的资源无法从另一个来源访问。

这意味着一个源不能访问来自其他源的内容。这也阻止了通过特定源间接发生的任何可疑活动。

如果两个源的URL具有相同的主机名、端口和协议，则被认为是相同的两个源。

例：

http://example.com:80/data/
http://example.com:80/file/data

上述两个链接的源与方案、主机名和端口相同。

http://example.com:144/data/
https://example.com:80/file/data

以上两个链接由于端口和协议的不同而不同。

由于这个策略，不能直接请求原始来源。异步请求机制如AXIOS，AJAX和Fetch请求会显示其他来源的错误消息，这是CORS的结果，CORS表示 跨来源资源共享 ，当来源不匹配时发生。

也有一些例外的情况，包括：

使用 <script src="…"></script> 的JavaScript是允许的，没有错误指示。
使用 <link rel="stylesheet" href="…"> 应用的CSS是允许的。
由 <img/> 显示的图片。
由 <video/> 和 <audio/> 播放的媒体。
由 <object> 和 <embed> 嵌入的外部资源。
使用 @font-face 应用的字体。一些浏览器允许跨来源字体，而其他浏览器要求同一来源。
由 <iframe> 嵌入的任何内容是允许的。

以上情况也会发起跨来源请求，但浏览器不会限制。也允许跨来源写入。例如，表单提交。

让我们讨论一种CORS发生的情况：

示例1： 在下面的示例中，我们将创建两个文件。按照下面的步骤来正确演示示例：

HTML文件： 这个文件会发起一个AJAX请求。
JS文件： 这个文件返回响应。

步骤1： 创建一个HTML文件，粘贴下面的HTML代码，并在任何浏览器中执行它。

HTML

<html> 
  
<body> 
    <script type="text/javascript"> 
        const xhr = new XMLHttpRequest(); 
        const url = 'http://localhost:3000/events'; 
        xhr.open('GET', url); 
        xhr.send(); 
    </script> 
</body> 
  
</html>

步骤2： 通过在浏览器中按下F12打开开发者工具。

步骤3： 转到控制台选项卡以查看CORS错误消息。

步骤4： 创建一个包含以下代码的JS文件：

Javascript

'use strict'; 
  
const express = require('express'); 
run().catch(err => console.log(err)); 
  
async function run() { 
    const app = express(); 
    app.get('/events', async function (req, res) { 
        res.send('Hi'); 
    }); 
    await app.listen(3000); 
    console.log('Listening on port 3000'); 
}

步骤5： 在命令提示符中运行以下命令：

$ node <file_name>.js

输出：

关于JavaScript的同源政策是什么

在上面的示例中，我们遇到了一个CORS策略错误，因为我们使用AJAX请求资源，并且请求的来源是NULL，这与上述JS文件运行的服务器来源不匹配。

为了防止获取此策略，我们从服务器端发送一个特殊的响应头，称为 Access-Control-Allow-Origin ，可以将其设置为*，表示允许所有来源，或将其设置为“”，表示仅允许特定的URL。

上述JS文件更改为： 我们将 Access-Control-Allow-Origin 设置为 “*” ，以防止CORS错误：

Javascript

'use strict'; 
  
const express = require('express'); 
run().catch(err => console.log(err)); 
  
async function run() { 
    const app = express(); 
  
    app.get('/events', async function (req, res) { 
        res.set({ "Access-Control-Allow-Origin": "*" }); 
        res.send('Hi'); 
  
    }); 
  
    await app.listen(3000); 
    console.log('Listening on port 3000'); 
}

示例 2： 在这个示例中，我们将创建一个服务器来允许一个 null 来源，这个来源代表了AJAX请求。因此，我们能够成功地在控制台打印字符串“Hello World”。

步骤1： 创建一个HTML文件，粘贴以下HTML代码并在任何浏览器中执行：

HTML

<html> 
  
<body> 
    <script type="text/javascript"> 
        const xhr = new XMLHttpRequest(); 
        const url = 'http://localhost:3000/events'; 
        xhr.onload = (res) => { 
            console.log(res.target.response); 
        } 
        xhr.open('POST', url); 
  
        xhr.send("Hello World!"); 
    </script> 
</body> 
  
</html>

步骤2： 在浏览器中按下F12打开开发者工具。

步骤3： 转到控制台选项卡以查看CORS错误消息。

步骤4： 使用以下代码创建一个JS文件：

Javascript

'use strict'; 
  
const express = require('express'); 
run().catch(err => console.log(err)); 
  
async function run() { 
    const app = express(); 
  
    app.post('/events', (req, res) => { 
        res.set({ 
            'Cache-Control': 'no-cache', 
            'Access-Control-Allow-Origin': 'null'
        }); 
        req.on("data", (data) => { 
  
            res.status(200) 
            res.send(data.toString()); 
        }) 
  
    }) 
  
    await app.listen(3000); 
    console.log('Listening on port 3000'); 
}

步骤5： 在命令提示符下运行以下命令：