js src 跨域

在JavaScript中，src属性通常用于<script>标签、<img>标签、<iframe>标签等，用于加载外部资源。当这些资源的源（域名、协议或端口）与当前页面的源不同时，就会发生跨域问题。

基础概念

跨域问题源于浏览器的同源策略，这是一种安全机制，用于限制一个源的文档或脚本如何与另一个源的资源进行交互。同源的定义是：协议、域名和端口都相同。

相关优势

跨域资源共享（CORS）是一种机制，它使用额外的HTTP头来告诉浏览器，允许在一个源上加载的网页应用访问位于不同源服务器上的资源。

类型

1. 简单请求：使用GET、POST或HEAD方法，且HTTP头信息有限制。
2. 预检请求：对于非简单请求，浏览器会先发送一个OPTIONS请求来检查服务器是否允许实际请求。

应用场景

• 加载不同域名下的图片、脚本、样式表等。
• 使用第三方API服务。
• 嵌入其他网站的地图、视频等多媒体内容。

解决跨域问题的方法

1. CORS：服务器端设置Access-Control-Allow-Origin响应头，允许特定的源访问资源。
2. CORS：服务器端设置Access-Control-Allow-Origin响应头，允许特定的源访问资源。
3. 或者指定特定的源：
4. 或者指定特定的源：
5. JSONP：利用<script>标签没有跨域限制的特性，通过动态创建<script>标签来加载数据。但只支持GET请求。
6. JSONP：利用<script>标签没有跨域限制的特性，通过动态创建<script>标签来加载数据。但只支持GET请求。
7. 代理服务器：在同源的服务器上设置一个代理，前端请求同源的代理服务器，代理服务器再去请求目标服务器，然后将结果返回给前端。
8. WebSocket：WebSocket协议支持跨域通信，可以在客户端和服务器之间建立持久连接。
9. 服务器端设置Header：服务器端可以设置Access-Control-Allow-Methods、Access-Control-Allow-Headers等响应头来放宽跨域限制。

示例代码（CORS）

假设你有一个Node.js服务器，可以使用cors中间件来简化跨域设置：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/data', (req, res) => {
    res.json({ message: '这是跨域数据' });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

在前端，你可以直接请求这个API：

fetch('http://localhost:3000/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

总结

跨域问题是前端开发中常见的问题，但通过合理设置服务器响应头、使用代理服务器或利用WebSocket等方法，可以有效解决这一问题。