跨域（Cross-Origin Resource Sharing，CORS）是由浏览器的同源策略（Same-Origin Policy）引起的，同源策略是浏览器最基本的安全机制之一，用于防止恶意网站通过脚本等方式访问用户的私密信息。同源策略要求网页中的脚本只能与其所属的域名、协议和端口相同的资源进行交互，而不允许跨域访问。只要3者有一个不同，就跨域
什么是 协议、域名、端口号?
以https://www.baidu.com/ 为例
- 协议：
https://。指定了浏览器和服务器之间进行通信时所采用的规则。常见的协议包括 HTTP（超文本传输协议）和 HTTPS（安全超文本传输协议）。HTTP 是不加密的，而 HTTPS 则通过 SSL/TLS 加密数据传输，更安全。 - 域名：
www.baidu.com。域名是用于识别一个或多个 IP 地址的字符串。它们通常代表着一个网站、服务器或者网络资源的地址 - 端口号：80。（ 可以不写，默认80）端口是一个数字，用于标识网络通信中的不同服务或进程。在网页浏览器中，默认的 HTTP 端口是 80，而 HTTPS 的默认端口是 443。
跨域问题通常出现在以下情况下：
- 不同域名之间的访问：例如，一个页面的源是
http://example.com，但是通过 AJAX 请求访问了http://api.example.org。 - 不同协议之间的访问：例如，一个页面的源是
http://example.com，但是通过 AJAX 请求访问了https://example.com。 - 不同端口之间的访问：例如，一个页面的源是
http://example.com，但是通过 AJAX 请求访问了http://example.com:8080。
为了解决跨域问题，可以通过以下方式之一进行配置：
1. CORS（服务端配置）
在服务端设置 CORS 头部，允许指定的域名访问资源。以下是一个简单的 Node.js Express 示例：
const express = require('express');
const app = express();
// 允许所有域名访问，可以根据需求进行设置
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
// 示例路由
app.get('/data', (req, res) => {
res.json({ message: 'Hello from the server!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2. JSONP（客户端解决方案）
使用 JSONP（JSON with Padding）是一种跨域请求的解决方案，它利用 <script> 标签的 src 属性不受同源策略限制的特性。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<script>
function handleResponse(data) {
console.log(data);
}
</script>
<script src="http://example.com/api/data?callback=handleResponse"></script>
</body>
</html>
Nginx 配置
在 Nginx 中配置跨域请求通常需要在服务器的配置中添加一些头部信息，例如：
location /api {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
add_header 'Content-Length' 0;
add_header 'Content-Type' 'text/plain charset=UTF-8';
return 204;
}
}
以上配置示例中，Access-Control-Allow-Origin 设置为 * 表示允许所有域名访问，也可以根据需求设置特定域名。Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 用于指定允许的 HTTP 方法和头部信息。如果是 OPTIONS 请求，需要返回预检请求的响应。
请注意，具体的 Nginx 配置可能会因应用场景而有所不同，以上示例仅供参考。在配置时请确保充分了解各个选项的含义和影响。
